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实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript工具库代码
Mar 29 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
js仿微博动态栏功能
Feb 22 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
导游词400字
2015/02/13 职场文书
回复函格式及范文
2015/07/14 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Linux磁盘管理方法介绍
2022/06/01 Servers