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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
vue+element实现打印页面功能
May 20 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
解决vue中的无限循环问题
Jul 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 事务处理数据实现代码
2010/05/13 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Django组件cookie与session的具体使用
2019/06/05 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
健康证明
2015/06/19 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript