ExtJS TreeGrid的使用方法

標籤：field   原始碼   nodelist   end   family   flex   conf   efi   table   

假設您是第一次使用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,width:150    }, {        header: '節點IP',  dataIndex: 'ip', align : 'center',sortable:false,width:150    }, {        header: '連接埠號碼', dataIndex: 'port',align : 'center',sortable:false,width:50    }, {        header: '節點描寫敘述', dataIndex: 'desc',align : 'center',sortable:false,width: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的使用方法