EXTJS4自学手册——页面控件（树形控件）

一、简单的树：

例子：

<script type="text/javascript">
        Ext.onReady(function () {
            //定义树形组件
            Ext.create('Ext.tree.Panel', {
                title: '简单的树形组件',
                width: 200,
                //数据容器
                store: Ext.create('Ext.data.TreeStore', {
                    //根节点
                    root: {
                        //是否展开
                        expanded: true,
                        children: [
                            //leaf属性标明是是否是根节点，如果是，必须指明
                            {text: "我的树1", leaf: true },
                            //child属性标明是此节点下面有子节点
                            { text: "我的树2", expanded: true,
                                children: [
                            { text: "我的树2.1", leaf: true },
                            { text: "我的树2.2", leaf: true }
                            ]
                            },
                            { text: "我的树3", leaf: true }
                            ]
                    }
                }),
                //是否显示根节点
                rootVisible: false,
                renderTo: 'myTree'
            });
        });
    </script>

执行结果：

二、带选择框的树形控件：

说明：只需要在节点加上checked属性即可

例子：

<script type="text/javascript">
        Ext.onReady(function () {
            //定义树形组件
            Ext.create('Ext.tree.Panel', {
                title: '简单的树形组件',
                width: 200,
                //数据容器
                store: Ext.create('Ext.data.TreeStore', {
                    //根节点
                    root: {
                        //是否展开
                        expanded: true,
                        children: [
                        //leaf属性标明是是否是根节点，如果是，必须指明
                        //为节点加上checked属性，实现带选择框的节点
                        {text: "我的树1", leaf: true, checked: false },
                        //child属性标明是此节点下面有子节点
                        //为节点加上checked属性，实现带选择框的节点
                            {text: "我的树2", checked: false, expanded: true,
                            children: [
                            //为节点加上checked属性，实现带选择框的节点
                            {text: "我的树2.1", checked: false, leaf: true },
                            //为节点加上checked属性，实现带选择框的节点
                            {text: "我的树2.2", checked: false, leaf: true }
                            ]
                        },
                        //为节点加上checked属性，实现带选择框的节点
                            {text: "我的树3", checked: true, leaf: true }
                            ]
                    }
                }),
                listeners: {
                    //单击根节点时，全选或者全不选子节点
                    checkchange: function (n, checked) {
                        n.cascade(function (c) {
                           c.set("checked",checked)
                        })
                    }
                },
                //是否显示根节点
                rootVisible: false,
                renderTo: 'myTree'
            });
        });
    </script>

执行结果：