当前位置: 首页 > news >繁体>ExtJS TreeGrid的使用方法

ExtJS TreeGrid的使用方法

假设您是第一次使用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属性,否则无法显示树形

转载于:https://www.cnblogs.com/liguangsunls/p/7294941.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-18411.html

如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网进行投诉反馈,一经查实,立即删除!


相关文章:

  • shell命令技巧——文本去重并保持原有顺序
  • 常用tab选项卡代码
  • 数据结构与算法系列----字典树
  • OC学习3——C语言特性之指针
  • Spring中xml文件配置也可以配置容器list、set、map
  • Cockroachdb 一、系统环境
  • 压缩解压打包工具基础
  • 什么是值栈
  • 内置过滤器
  • phpmyadmin-错误:配置文件权限错误,不应任何用户都能修改!这里有答案
  • 编译hadoop,spark遇到的问题总结
  • [OpenGL] 斯坦福兔子与显示列表
  • 使用JavaFX打开fxml,找不到打开的图形界面
  • phpstorm取消自动保存,修改未保存的文件显示*星号
  • python之路--面向对象之封装
  • LeetCode_Maximum Subarray | Maximum Product Subarray
  • java的OutOfMemoryError: PermGen space实战剖析
  • video-audio
  • 实现微信摇一摇部分功能
  • 数据结构之线性表代码实现顺序存储,链式存储,静态链表(选自大话数据结构)...
  • Eclipse断点种类
  • 文字超长隐藏为...ie7不兼容的解决办法
  • 《跨界杂谈》商业模式(三):黑帮
  • A+B Problem(再升级)
  • 自定义异步加载资源插件
  • sublime test3 安装及配置
  • 解决修改完系统默认python版本后yum不可用的问题!!!!!!
  • windows下git安装配置
  • 基于数组实现Java 自定义Stack栈类及应用
  • python:关于三级菜单的新手实现
  • java的几个概念AOP、IOC、DI、DIP、工厂模式、IOC容器
  • servlet中doGet()和doPost()的区别
  • mysql-改表名
  • 使用 artTemplate 渲染数组
  • ajax取消重复请求
  • 夏令营讲课内容整理 Day 6 Part 3.
  • 201671010133 2016-2017-2 《java程序设计》 初学java!
  • 递归系列——数组和对象的相关递归
  • 【linux】安装python依赖库confluent_kafka
  • 也来谈谈IT培训
  • JMeter数据库操作详解
  • 20170830 - A - Java IO操作
  • 《XHTML》pdf
  • C++primer 13.1.2节练习
  • PyQt5学习笔记
  • 递归系列——递归树与函数记忆化
  • Laravel 学习笔记之文件上传
  • Microsoft Access 2002中文版标准培训教程pdf
  • Python_日记 序列化和反序列化
  • python--简易员工信息系统编写