Extjs复习笔记（二十）-- tree和grid结合

最新推荐文章于 2025-05-03 11:00:07 发布

原创最新推荐文章于 2025-05-03 11:00:07 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #UI

Extjs等js的Ajax框架专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个结合了树形结构(tree)和表格(grid)的Ext ColumnTree组件示例，该组件使用Ext.ux.tree.ColumnTree创建，并通过加载JSON数据实现动态填充。示例中包括任务名称(Task)、持续时间(Duration)及指派人员(AssignedTo)等列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让tree和grid结合起来

相关内容之前大都讲过，这里就不多讲了

Ext.onReady(function(){
    var tree = new Ext.ux.tree.ColumnTree({
        width: 550,
        height: 300,
        rootVisible:false,
        autoScroll:true,
		frame:true,
        title: 'Example Tasks',
        renderTo: Ext.getBody(),

        columns:[{
            header:'Task',
            width:330,
            dataIndex:'task'
        },{
            header:'Duration',
            width:100,
            dataIndex:'duration'
        },{
            header:'Assigned To',
            width:100,
            dataIndex:'user'
        }],

        loader: new Ext.tree.TreeLoader({
            dataUrl:'column-data.json', //用json文件作为数据源
            uiProviders:{ //对象是一个TreePanel，在ux/ColumnNodeUI.js里面，在用来规定整个UI的样式，可以直接拿去用，当然也可以适当改一下ColumnNodeUI.js
                'col': Ext.ux.tree.ColumnNodeUI
            }
			/*uiProviders：An object containing properties which specify custom Ext.tree.TreeNodeUI implementations. If the optional uiProvider attribute of a returned child node is a string rather than a reference to a TreeNodeUI implementation, then that string value is used as a property name in the uiProviders object.*/
        }),

        root: new Ext.tree.AsyncTreeNode({
            text:'Tasks' //用来显示tree的那一列名
        })
    });
});