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>

执行结果：