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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js密码强度校验
2015/11/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python openpyxl使用方法详解
2019/07/18 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
大学毕业自我评价
2014/02/02 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
酒店管理求职信
2014/06/09 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
企业安全生产检查制度
2015/08/06 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
pt-archiver 主键自增
2022/04/26 MySQL
Python PIL按比例裁剪图片
2022/05/11 Python