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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
js实现随机点名器精简版
Jun 29 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 CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python 内置函数filter
2017/06/01 Python
python绘制简单彩虹图
2018/11/19 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python 字典套字典或列表的示例
2019/12/16 Python
在keras中实现查看其训练loss值
2020/06/16 Python
简单的Python人脸识别系统
2020/07/14 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
学校中秋节活动总结
2015/03/23 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP