【ExtJS】一个简单的TreePanel

　　在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: ,

    rootVisible: true,

});

Ext.onReady(function(){

    var store = Ext.create('My.TreeStore');

    var treepanel = Ext.create('My.TreePanel',{

        store: store,

        renderTo: Ext.getBody()

    });

});

结果：

　　下一步，通过后台遍历文件目录，然后Extjs向后台发出请求，后台响应回一个JSON格式的数据，再然后生成遍历树，给树添加点击事件，在另一个panel里构建一个资源管理器，点击遍历树的文件夹会在资源管理器里展示文件夹内的所有文件......暂时考虑到这里吧。

巴特西

【ExtJS】一个简单的TreePanel

最新文章

热门文章