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 相关文章推荐
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Node.js简单入门前传
2017/08/21 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
银行实习鉴定
2013/12/13 职场文书
入党政审材料范文
2014/12/24 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书