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属性,否则无法显示树形
转载于:https://www.cnblogs.com/liguangsunls/p/7294941.html
ExtJS TreeGrid的使用方法相关推荐
- [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法
一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要.但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹 文件夹 extjs的查询组件的API 查询实例 主 ...
- extjs 渲染之前的方法_Unity通用渲染管线(URP)系列(十一)——后处理(Bloom)...
200+篇教程总入口,欢迎收藏: 放牛的星星:[教程汇总+持续更新]Unity从入门到入坟--收藏这一篇就够了zhuanlan.zhihu.com 本文重点内容: 1.创建简单的post-FX栈 2 ...
- Extjs常用属性、方法
一.Ext 1.1 Ext.isEmpty(v, allowBlank) //是否为空[链接] 1.2 Ext.isArray(v) //是否为数组集合 1.3 Ext.isPrimitive(v) ...
- 本地打开extjs api docs 的方法
将docs目录下 index.html 中的 <script type="text/javascript" src="../adapter/ext/ext-base ...
- ExtJs radiogroup form.loadRecord方法无法赋值正确解决办法
一.radiogroup的name和radio的name一致,inputValue为整形 {xtype: 'radiogroup',fieldLabel: '是否有效',name: 'status', ...
- ExtJs自学教程(1):一切从API開始
题 记 该系列文章不側重全方位的去介绍ExtJs的使用,仅仅是側重于解决ExtJs问题的思考方法.写的人不用长篇大论,学的人则可以自立更生.l 学习的人仅仅要有一些CSS的javascript的基 ...
- 在VS2012中实现ExtJS的智能提示
在VS2012中实现ExtJS的智能提示 VS2012发布后,以前的Extjs项目是在VS2010中做的.VS2010中智能提示不是很强,但是也有点作用.用VS2012打开项目后,居然发现VS2012 ...
- Dijit、ExtJS、jQuery UI 异同浅析
钟思奇是 IBM CDL 的一名软件工程师,主要从事 Dojo 控件库及基于 J2EE 的项目开发,热衷于学习各类新技术. 王 修文, 软件工程师, Sungard 王修文是 Sungard SGT ...
- ASP.NET MVC3与ExtJS结合建站笔记(要点)
1. MVC篇 MVC个人理解就是利用Model--View--Controller三层表现架构来实现网站的三层架构Data(数据层)--BLL(业务逻辑层)--View(表现层)的功能.即MVC是 ...
- ExtJs2.0学习系列(11)--Ext.XTemplate
XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ ...
最新文章
- CV00-01-CV基础理论
- POJ 3237.Tree -树链剖分(边权)(边值更新、路径边权最值、区间标记)贴个板子备忘...
- windows系统禁止更改服务启动类型_Win10系统关闭自动更新方法
- 常用 命令类,慢慢收集
- 黑盒法测试c语言,黑盒测试用例练习题.pdf
- NEERC13 Problem H.Hack Protection
- 在java中柱状图代码_我在java中编写了个柱状图,可运行了,我想让柱状图在JSP页面中显示,请问有什么方法么?谢谢。...
- C++设计模式详解之模板模式解析
- UNIX 环境高级编程(一) apue.h 文件与apue.3e的安装
- win2008 时间同步命令
- WPS加载项部署运行问题排查方法
- 树莓派在身份证件核验领域应用
- 中国(广西)壮语春节联欢晚会将举办
- 一道简单的电商数据分析笔试题:求组合商品的库存量
- matlab调节字体的函数,matlab 画图添加图例时,改变图例中字体大小
- android和ios测试环境搭建,iOS自动化测试环境搭建
- python9行代码_如何用9行Python代码编写一个简易神经网络
- 闲鱼怎么引流到淘宝客?吸引住大量的粉丝
- linux rpm 装 mac,在linux上搭建用于mac时间机器备份的server
- docker入门级详解
热门文章
- 串口驱动程序_实战microPython(09) 串口UART的使用(下)
- c++ssh连接_多台WIN10之间的SSH免密登录
- 输入文字加下划线_Word下划线你知道多少?
- python中的变量是动态类型的什么意思_python基础语法之变量
- python程序流程控制结构_Python程序控制结构 | 分支结构
- HTML5 定位 —— Geolocation API的正确使用
- Hibernate 拦截器 SQL语句提交前 更新表公共字段
- REDGATE又一好用的脚本工具ScriptsManager1.3
- 【上采样问题】将浮点运算转换成整数运算
- Main线程与main()方法的关系