Extjs4 Treegrid 使用心得分享(经验篇)


Posted in Javascript onJuly 01, 2013

最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料基本靠遍历,还是人工的。

使用treegrid,需要在调用页面的head中加载以下几个文件:

<link rel="stylesheet" type="text/css" href="css/ext-all.css"> 
<script type="text/javascript" src="ext-all.js"></script> 
<script type="text/javascript" src="treegrid.js"></script>

然后在页面的body中写上一个div
 <div id="tree-example"></div>

以上官方就这么写的,BUT,蛋疼的是,JS里没有改,不改就没法运行成功。把treegrid.js中的renderto,改成我们的div的ID就行了。

记得把json数据文件和css文件等拷贝到调用目录下。
完成的treegrid.js代码为:

/* 
This file is part of Ext JS 4 
Copyright (c) 2011 Sencha Inc 
Contact: http://www.sencha.com/contact 
GNU General Public License Usage 
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. 
If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. 
*/ 
Ext.require([ 
'Ext.data.*', 
'Ext.grid.*', 
'Ext.tree.*' 
]); 
Ext.onReady(function() { 
//we want to setup a model and store instead of using dataUrl 
Ext.define('Task', { 
extend: 'Ext.data.Model', 
fields: [ 
{name: 'task', type: 'string'}, 
{name: 'user', type: 'string'}, 
{name: 'duration', type: 'string'} 
] 
}); 
var store = Ext.create('Ext.data.TreeStore', { 
model: 'Task', 
proxy: { 
type: 'ajax', 
//the store will get the content from the .json file 
url: 'treegrid.json' 
}, 
folderSort: true 
}); 
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel 
var tree = Ext.create('Ext.tree.Panel', { 
title: 'Core Team Projects', 
width: 500, 
height: 300, 
renderTo: 'tree-example',//2B的官方和SV党们,这里竟然是getbody,bo你妹啊。 
collapsible: true, 
useArrows: true, 
rootVisible: false, 
store: store, 
multiSelect: true, 
singleExpand: true, 
//the 'columns' property is now 'headers' 
columns: [{ 
xtype: 'treecolumn', //this is so we know which column will show the tree 
text: 'Task', 
flex: 2, 
sortable: true, 
dataIndex: 'task' 
},{ 
//we must use the templateheader component so we can use a custom tpl 
xtype: 'templatecolumn', 
text: 'Duration', 
flex: 1, 
sortable: true, 
dataIndex: 'duration', 
align: 'center', 
//add in the custom tpl for the rows 
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', { 
formatHours: function(v) { 
if (v < 1) { 
return Math.round(v * 60) + ' mins'; 
} else if (Math.floor(v) !== v) { 
var min = v - Math.floor(v); 
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm'; 
} else { 
return v + ' hour' + (v === 1 ? '' : 's'); 
} 
} 
}) 
},{ 
text: 'Assigned To', 
flex: 1, 
dataIndex: 'user', 
sortable: true 
}] 
}); 
});
Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
javascript cookies操作集合
Apr 12 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
原生javascript兼容性测试实例
Jul 01 #Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 #Javascript
批量实现面向对象的实例代码
Jul 01 #Javascript
js原生appendChild的bug解决心得分享
Jul 01 #Javascript
Jquery时间验证和转换工具小例子
Jul 01 #Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 #Javascript
js函数排序的实例代码
Jul 01 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python与字符编码问题
2019/05/24 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
行政专员岗位职责
2014/01/02 职场文书
电大本科自我鉴定
2014/02/05 职场文书
环保建议书600字
2014/05/14 职场文书
品牌转让协议书
2014/08/20 职场文书
公司地址变更通知
2015/04/25 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
工作态度不好检讨书
2015/05/06 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python