假設您是第一次使用ExtJS的TreeGrid的話，我相信總會有一些小麻煩的，以下就來說一說ExtJS中TreeGrid的使用。

本人使用的ExtJS版本號為4.1.1，而且使用了MVC模式。假設不了解ExtJS的MVC模式的話我個認為還是有必要去學學的，
學完后你肯定會喜歡上的。
事實上在ExtJS中并沒有TreeGrid這么一個類，這個說法是從EasyUI中借用過來的，ExtJS中的TreeGrid功能已經合在了Ext.tree.Panel中。

TreeGrid顯示出來大概是這個樣子：

以下是這個樣例的源代碼：

View:

Ext.define("node.view.NodeListPanel", {
    extend : "Ext.tree.Panel",
    alias : "widget.nodelistpanel",
    title : "節點管理",
    columnLines : true,
    region: 'center',
    root:{
        id:'root',
        name:'節點管理',
        expanded:true
    },
    columns: [{
        xtype : 'treecolumn',
        header: '節點名稱',  dataIndex: 'name', sortable:false,flex:1
    }, {
        header: '節點編碼', dataIndex: 'code',align : 'center',sortable:false,150
    }, {
        header: '節點IP',  dataIndex: 'ip', align : 'center',sortable:false,150
    }, {
        header: '端口號', dataIndex: 'port',align : 'center',sortable:false,50
    }, {
        header: '節點描寫敘述', dataIndex: 'desc',align : 'center',sortable:false,200
    }],
    loadMask:{
        msg : '正在載入數據,請稍等...'
    },
    store : Ext.create('node.store.NodeStore'),
    //store : "NodeStore",
    renderTo: Ext.getBody()
});

Store:

Ext.define("node.store.NodeStore", {
    extend : 'Ext.data.TreeStore',
    //model : 'node.model.Node',//用model傳遞不了數據
    proxy : {
        type : 'ajax',
        url : 'data/NodeTree.json',
        reader : 'json',
        autoLoad : true
    },
    fields : [{
        name: 'id',
        type: 'string'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'code',
        type: 'string'
    }, {
        name: 'ip',
        type: 'string'
    }, {
        name: 'port',
        type: 'string'
    }, {
        name: 'desc',
        type: 'string'
    }]

});

NodeTree.json :

{
    "id":"root",
    "leaf":false,
    "name" : "root",
    "children":[{
        "id":"1",
        "leaf":true,
        "name" : "公安",
        "code" : 452363214,
        "ip" : "192.168.0.203",
        "port" : 8080,
        "desc" : "公安節點"
    }, {
        "id":"4",
        "leaf":true,
        "name" : "法院",
        "code" : 452364587,
        "ip" : "192.168.0.204",
        "port" : null,
        "desc" : "法院節點"
    }, {
        "id":"9",
        "leaf":true,
        "name" : "檢查院",
        "code" : 452312365,
        "ip" : "192.168.0.205",
        "port" : null,
        "desc" : "檢查院節點"
    }, {
        "id":"10",
        "leaf":false,
        "name" : "紀檢委",
        "code" : 45234596,
        "ip" : "192.168.0.235",
        "port" : null,
        "desc" : "紀檢委節點",
        "expanded":true,
        "children":[{
            "id":"2",
            "leaf":true,
            "name" : "測試節點",
            "code" : 45239658,
            "ip" : "192.168.0.255",
            "port" : null,
            "desc" : "測試節點"
        }]
    }]
}

Controller:

Ext.define('node.controller.NodeController', {
    extend:'Ext.app.Controller',
    init:function(){
        this.control({

        });
    },
    views: [
        'NodeListPanel'
    ],
    stores: [
        //"NodeStore"
    ],
    models: [
        //"Node"
    ]
});

app.js :

Ext.onReady(function(){
    Ext.Loader.setConfig({
        enabled : true
    });

    Ext.application({
        name : "node",
        appFolder : ".",
        launch : function() {
            Ext.create("Ext.container.Viewport", {
                layout : "border",
                items : [{
                    xtype : "nodelistpanel"
                }]
            });
        },
        controllers : [
            'NodeController'
        ]
    });
});

在這里有兩個非常奇怪的地方：
1. NodeListPanel指定Store時，不能直接配置成store:"NodeStore"讓其動態載入，而要直接創建出來，所以在Controller中不指定NodeStore也是能夠的
2. NodeStore不能直接指定Model。而應該配置其fields屬性取代，由于配置Model對TreeStore來說根本不起作用
以上兩點至于為什么會這樣，本人也沒有去深究，望高人直接指點。

另一個須要注意的地方就是一定要為TreePanel配置root屬性，否則無法顯示樹形

總結

以上是生活随笔為你收集整理的ExtJS TreeGrid的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。