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 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
vue组件的写法汇总
Apr 12 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JS中FormData类实现文件上传
Mar 27 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函数(ignore_user_abort)
2012/08/01 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP生成plist数据的方法
2015/06/16 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
js单例模式详解实例
2013/11/21 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Python中文件操作简明介绍
2015/04/13 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python正则表达式使用范例分享
2016/12/04 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python绘制动态水球图过程详解
2020/06/03 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
c语言常见笔试题总结
2016/09/05 面试题
大学生物业管理求职信
2013/10/24 职场文书
后勤部长岗位职责
2013/12/14 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
个人简历自我评价范文
2014/02/04 职场文书
企业理念标语
2014/06/09 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书