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快速排序算法详解
Sep 17 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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 has encountered a Stack overflow问题解决方法
2014/11/03 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Pytorch之Variable的用法
2019/12/31 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python logging模块的使用
2020/09/07 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
大学生党课思想汇报
2013/12/29 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
公司授权委托书范文
2014/08/02 职场文书
白酒营销策划方案
2014/08/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
出生医学证明书
2014/09/15 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
毕业实习计划书
2015/01/16 职场文书
党员转正申请报告
2015/05/15 职场文书
锦旗赠语
2015/06/23 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
详解Go与PHP的语法对比
2021/05/29 PHP
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python