ExtJS中TreeGrid的用法

页面导航:首页 > 网络编程 > JavaScript > ExtJS中TreeGrid的用法

ExtJS中TreeGrid的用法

来源: 作者: 时间:2016-02-20 09:49 【

如果您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,下面就来说一说ExtJS中TreeGrid的使用。本人使用的ExtJS版本为4 0 7,并且使用了MVC模式,如果不了解ExtJS的MVC模式的话我
如果您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,下面就来说一说ExtJS中TreeGrid的使用。
本人使用的ExtJS版本为4.0.7,并且使用了MVC模式,如果不了解ExtJS的MVC模式的话我个觉得还是有必要去学学的,
学完后你肯定会喜欢上的。
其实在ExtJS中并没有TreeGrid这么一个类,这个说法是从EasyUI中借用过来的,ExtJS中的TreeGrid功能已经合在了Ext.tree.Panel中。

TreeGrid显示出来大概是这个样子:

\

下面是这个例子的源码:

View:<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">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属性,否则无法显示树形

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <