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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
原生js实现日历效果
Mar 02 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
便捷提取python导入包的属性方法
2018/10/15 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
Ruby如何定义一个类
2012/10/08 面试题
毕业生找工作推荐信
2013/11/21 职场文书
《王二小》教学反思
2014/02/27 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
法制教育演讲稿
2014/09/10 职场文书
税务会计岗位职责
2015/04/02 职场文书