extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面


Posted in Javascript onApril 02, 2013

想要实现 TreeGrid的效果,打开官方例子却看不到效果,怎么办呢?我是这样实现的

var root = new Ext.tree.TreeNode({ 
text: '根节点', 
expanded: true 
}); 
tree.setRootNode(root); 
var nodes = {}; 
nodes.children = mydata;/*TreeGrid的json数据[{……},{……}]*/ 
function appendChild(node, o) { 
if (o.children != null && o.children.length > 0) { 
for (var a = 0; a < o.children.length; a++) { 
var n = new Ext.tree.TreeNode({ 
task:o.children[a].task, 
duration:o.children[a].duration, 
user:o.children[a].user, 
iconCls:o.children[a].iconCls 
}); 
node.appendChild(n); 
appendChild(n, o.children[a]); 
} 
} 
} 
appendChild(root, nodes);

看源码我们知道 TreeGrid 继承于 TreePanel
所以 root 才是数据源而不是 store,
根据加载json数据到树的原理,同理我们可以这样加载json数据到 treeGrid,而不再为dataUrl: 'treegrid-data.json'这样的加载方式而烦恼了,是不是很简单呢?
Javascript 相关文章推荐
xml转json的js代码
Aug 28 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 #Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 #Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 #Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 #Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 #Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 #Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 #Javascript
You might like
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
浅谈Python中的继承
2020/06/19 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
监督检查工作方案
2014/05/28 职场文书
企业承诺书格式范文
2015/04/28 职场文书
大学同学聚会感言
2015/07/30 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python