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

让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的那一列名
        })
    });
});