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>

 

执行结果：