ExtJS TreeGrid的用法
来源:互联网 发布:php技术是什么 编辑:程序博客网 时间:2024/04/30 21:34
如果您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,下面就来说一说ExtJS中TreeGrid的使用。
本人使用的ExtJS版本为4.1.1,并且使用了MVC模式,如果不了解ExtJS的MVC模式的话我个觉得还是有必要去学学的,
学完后你肯定会喜欢上的。
其实在ExtJS中并没有TreeGrid这么一个类,这个说法是从EasyUI中借用过来的,ExtJS中的TreeGrid功能已经合在了Ext.tree.Panel中。
Store:
NodeTree.json :
Controller:
app.js :
在这里有两个很奇怪的地方:
1. NodeListPanel指定Store时,不能直接配置成store:"NodeStore"让其动态加载,而要直接创建出来,所以在Controller中不指定NodeStore也是可以的
2. NodeStore不能直接指定Model,而应该配置其fields属性代替,因为配置Model对TreeStore来说根本不起作用
以上两点至于为什么会这样,本人也没有去深究,望高人直接指点。
还有一个需要注意的地方就是一定要为TreePanel配置root属性,否则无法显示树形
本人使用的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属性,否则无法显示树形
0 0
- ExtJS TreeGrid的用法
- Extjs treeGrid的node的值
- ExtJS4.2 TreeGrid 的用法
- Extjs treeGrid分页实例
- Extjs 3.31 TreeGrid 我的小改动,实现静态页面加载json到TreeGrid里面
- EXTJS实现的TREEGRID(后台java,框架SpringMVC)
- 关于jquery easyui 中treegrid的用法例子
- extjs的基本用法
- Extjs tip的用法
- extjs的验证用法
- Extjs的itemselector用法
- ExtJS——TreeGrid异步加载
- extjs的combobox的用法
- treeGrid的使用方法
- TreeGrid的属性介绍
- easyUI treegrid的使用
- jQWidgets的TreeGrid 心得:
- 二 TreeGrid的绑定
- 黑马程序员——OC基础—核心语法(下)
- C语言编写的商品管理系统
- 【无限互联】学员作品:懒人听书
- 设计模式——访问者(Visitor Pattern)
- HDU 1250
- ExtJS TreeGrid的用法
- 游标的作用及概念详解
- 自动化运维工具Puppet学习 - 第一篇
- Cocos2d-JS下往Sprite SkeletonAnimation Armature(骨骼动画)添加shader
- POJ 3921 Destroying the bus stations 最大流
- leetcode练习
- HDU1067 Gap 【BFS+MAP】
- 链表知识点(五)【单链表的测长)】
- java字符集探测器jchardet