ExtJS 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的使用方法

原文地址:http://www.cnblogs.com/liguangsunls/p/7294941.html


最新回复(0)
/jishuX_2BWiaMBNDlXoYvqsAqhF_2B99ARmFuOig_2BNld7AyqPdy0_3D4719054
8 简首页