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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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采集速度探究总结(原创)
2008/04/18 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python复制文件的方法实例详解
2015/05/22 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python 使用type来定义类的实现
2019/11/19 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python configparser模块常用方法解析
2020/05/22 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
一句话工作感言
2014/03/01 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
老师对学生的评语
2014/04/18 职场文书
感恩节活动策划方案
2014/05/16 职场文书
校庆团日活动总结
2014/08/28 职场文书
学生保证书格式
2015/02/27 职场文书
春季运动会加油词
2015/07/18 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL