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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
js 操作符实例代码
Oct 24 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
jQuery技巧总结
Jan 01 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
详解vue中移动端自适应方案
May 05 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
PHP 万年历实现代码
2012/10/18 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php开启openssl的方法
2014/05/15 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
页面中js执行顺序
2009/11/09 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Django中url的反向查询的方法
2018/03/14 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
super关键字的用法
2012/04/10 面试题
学校采购员岗位职责
2014/01/02 职场文书
汽车广告策划方案
2014/05/31 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
检讨书格式
2015/01/23 职场文书
六年级数学教学反思
2016/02/16 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL