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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
微信小程序实现留言板
2018/10/31 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python 实现插入排序算法
2012/06/05 Python
python cookielib 登录人人网的实现代码
2012/12/19 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
奥巴马开学演讲稿
2014/05/15 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
中学生思想品德评语
2014/12/31 职场文书
归元寺导游词
2015/02/06 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB