Ext JS4学习教程+笔记（七）树面板Tree Panel

来源：互联网发布：中国素质教育现状知乎编辑：程序博客网时间：2024/06/04 22:48

Ext JS4的Tree Panel能够实现树的显示，其关键还是提供一个类型为Ext.data.TreeStore的store数据，

然后在Ext.tree.Panel的store属性指定到这个数据上即可。

function treeTest(){
     var treeStore = Ext.create('Ext.data.TreeStore',{
                    root:{
                         expanded:true,
                         text:'根节点',
                         children:[
                              {text:'节点1',leaf:true},
                              {
                                   text:'节点2',
                                   leaf:false,
                                   checked:true,
                                   cls:'treeNode',
                                   expanded:true,
                                   children:[
                                        {text:'节点2-1',leaf:true},
                                        {
                                             text:'节点2-2',
                                             leaf:true,
                                             href:'test.html',
                                             hrefTarget:'_self'
                                        }
                                   ]
                              }
                         ]
                    }

     });
     Ext.create('Ext.tree.Panel',{
                         width:100,
                         height:300,
                         title:'树测试',
                         renderTo:Ext.getBody(),
                         store:treeStore,
                         rootVisible:false,
                         useArrows:true
     });
}

说明：

1，TreeStore的关键属性是root,而root属性里面嵌套的children就是它的下层节点；

每个节点都有text和leaf属性，分别表示其节点上的文字，以及是否是叶子节点。

其他常用属性还有，expanded表示是否展开，cls表示其CSS样式类，href和hrefTarget配合能够链接到其他页面。

每个叶节点的全部属性参照Ext JS4文档中的Ext.data.NodeInterface类的说明。

2，Tree Panel的属性中除了store必须设置外，常用属性还有，设置rootVisible表示根节点是否可见，useArrows属性表示展开的小图形采用类似Vista的箭头形式。

树上的点击、双击、右击等事件可以处理这个Tree Panel的itemclick、itemdblclick和itemcontextmenu这些事件。