Extjs4 TreeGrid

本文介绍Extjs4 TreeGrid的使用，实例中的树实现了多表头、使用AJAX请求载入数据、排序，隐藏和显示表头等Grid中的功能。实例来自Extjs官方网站

HTML代码：

<div id="tree-example"></div>

JS代码：

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);

Ext.onReady(function() {
    //we want to setup a model and store instead of using dataUrl
    Ext.regModel('Task', {
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            {name: 'duration', type: 'string'}
        ]
    });

    var store = new Ext.data.TreeStore({
        model: 'Task',
        proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json'
        },
        root: {
            expanded: true
        }
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    var tree = new Ext.tree.TreePanel({
        title: 'Core Team Projects',

        width: 500,
        height: 300,
        renderTo: Ext.getBody(),

        useArrows: true,
        rootVisible: false,

        store: store,

        //the 'columns' property is now 'headers'
        headers: [{
            xtype: 'treeheader', //this is so we know which column will show the tree
            text: 'Task',
            flex: 2,
            dataIndex: 'task'
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templateheader',
            text: 'Duration',
            flex: 1,
            dataIndex: 'duration',
            align: 'center',
            //add in the custom tpl for the rows
            tpl: new Ext.XTemplate('{duration:this.formatHours}', {
                formatHours: function(v) {
                    if (v < 1) {
                        return Math.round(v * 60) + ' mins';
                    } else if (Math.floor(v) !== v) {
                        var min = v - Math.floor(v);
                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                    } else {
                        return v + ' hour' + (v === 1 ? '' : 's');
                    }
                }
            })
        },{
            text: 'Assigned To',
            flex: 1,
            dataIndex: 'user'
        }]
    });
});

实例使用JSON数据格式，要求返回类似如下格式的数据：

[{"text":".","children": [
    {
        task:'Project: Shopping',
        duration:13.25,
        user:'Tommy Maintz',
        iconCls:'task-folder',
        expanded: true,
        children:[{
            task:'Housewares',
            duration:1.25,
            user:'Tommy Maintz',
            iconCls:'task-folder',
            children:[{
                task:'Kitchen supplies',
                duration:0.25,
                user:'Tommy Maintz',
                leaf:true,
                iconCls:'task'
            },{
                task:'Groceries',
                duration:.4,
                user:'Tommy Maintz',
                leaf:true,
                iconCls:'task'
            },{
                task:'Cleaning supplies',
                duration:.4,
                user:'Tommy Maintz',
                leaf:true,
                iconCls:'task'
            },{
                task: 'Office supplies',
                duration: .2,
                user: 'Tommy Maintz',
                leaf: true,
                iconCls: 'task'
            }]
        }]
    }]
}]