【ExtJS】一个简单的TreePanel

浏览数：41 / 时间：2015年06月09日

　　在ExtJS中，构造一个树形结构变得很简单。

　　需要用到的：

　　　　Ext.tree.Panel

　　　　　　TreePanel提供树形结构的UI表示的树状结构数据。一个TreePanel必须绑定一个Ext.data.TreeStore。TreePanel通过columns配置，支持多列。

　　　　Ext.data.TreeStore

　　　　　　TreeStore是一个允许内嵌数据的存储区实现。

　　　　　　它为加载节点提供了一些方便的方法，并能够使用分层树状结构来结合一个store。此类也可以方便的从Tree中进行传播一些事件。

　　此外，还有能用到的一些配置属性：

　　　　Ext.data.TreeStore:

　　　　　　expanded: true/false　　//用来设置文件夹默认展开(true)或者收缩(false),默认为false

　　　　　　root: {}　　　　　　　　 //根节点,节点设置的开始

　　　　　　children: [{},{}]　　　 //子节点的开始

　　　　　　leaf: true/false　　　　 //用来辨识该文件是否还有子节点，从而判断是否为本节点渲染展开图标或箭头。true为没有子节点，默认为flase

　　　　Ext.tree.Panel:

　　　　　　store: store　　　　　　//该树结构关联的数据store

　　　　　　rootVisible: true/false　//是否隐藏根节点

　　其他诸如"width"、"height"、margin、border、renderTo等皆有的配置属性就不提了。

　　接下来，上代码：

Ext.define(‘My.TreeStore‘,{
    extend: ‘Ext.data.TreeStore‘,
    root: {
        expanded: true,
        children: [
           { text: ‘src‘, expanded: true, children: [
                { text: ‘file1‘,leaf: true },
                { text: ‘file2‘,leaf: true }
            ]},
            {text: ‘file‘, leaf: true}
        ]
    }
});

Ext.define(‘My.TreePanel‘,{
    extend: ‘Ext.tree.TreePanel‘,
    xtype: ‘mytreepanel‘,    
    width: 300,    
    rootVisible: true,    
});

Ext.onReady(function(){
    var store = Ext.create(‘My.TreeStore‘);
    var treepanel = Ext.create(‘My.TreePanel‘,{
        store: store,
        renderTo: Ext.getBody()
    });
});