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>

執行結果：