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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
jQuery 选择器详解
Jan 19 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
nodejs导出excel的方法
2015/06/30 NodeJs
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python 实现A*算法的示例代码
2018/08/13 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python 获取图片分辨率的方法
2019/01/08 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Django REST 异常处理详解
2020/07/15 Python
贯彻学习两会心得体会范文
2014/03/17 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
计算机实训报告总结
2014/11/05 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python