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 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
JS变量提升及函数提升实例解析
Sep 03 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
VOLVO车载收音机
2021/03/02 无线电
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
PHP如何将XML转成数组
2016/04/04 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
win10 64bit下python NLTK安装教程
2018/09/19 Python
pywinauto自动化操作记事本
2019/08/26 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
预备党员政审材料
2014/02/04 职场文书
中学生个人自我评价
2014/02/06 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
英文导游词
2015/02/13 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Python实现视频自动打码的示例代码
2022/04/08 Python