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脚本实现Web页面信息交互
Dec 21 Javascript
javascript 表单的友好用户体现
Jan 07 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
PHP中的cookie
2006/11/26 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
简单谈谈python中的多进程
2016/11/06 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python如何获取文件路径/目录
2020/09/22 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
高中毕业生自我鉴定例文
2013/12/29 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
入学申请自荐信范文
2014/02/26 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
个人担保书格式范文
2014/05/12 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
文艺演出主持词
2015/07/01 职场文书
升学宴学生致辞
2015/09/29 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis