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

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

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

复制代码 代码如下:
<link rel="stylesheet" type="text/css" href="css/extallcss">
<script type="text/javascript" src="extalljs"></script>
<script type="text/javascript" src="treegridjs"></script>

然后在页面的body中写上一个div

复制代码 代码如下:
<div id="treeexample"></div>

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

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

复制代码 代码如下:

/*
This file is part of Ext JS
Copyright (c) Sencha Inc
Contact:
GNU General Public License Usage
This  file may be used under the terms of the GNU General Public License  version 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 requirements will be met:  
If you are unsure which  license is appropriate for your use please contact the sales department  at
*/
Extrequire([
Extdata*
Extgrid*
Exttree*
]);
ExtonReady(function() {
//we want to setup a model and store instead of using dataUrl
Extdefine(Task {
extend: ExtdataModel
fields: [
{name: task type: string}
{name: user type: string}
{name: duration type: string}
]
});
var store = Extcreate(ExtdataTreeStore {
model: Task
proxy: {
type: ajax
//the store will get the content from the json file
url: treegridjson
}
folderSort: true
});
//ExtuxtreeTreeGrid is no longer a Ux You can simply use a treeTreePanel
var tree = Extcreate(ExttreePanel {
title: Core Team Projects
width:
height:
renderTo: treeexample//B的官方和SV党们这里竟然是getbodybo你妹啊
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:
sortable: true
dataIndex: task
}{
//we must use the templateheader component so we can use a custom tpl
xtype: templatecolumn
text: Duration
flex:
sortable: true
dataIndex: duration
align: center
//add in the custom tpl for the rows
tpl: Extcreate(ExtXTemplate {duration:thisformatHours} {
formatHours: function(v) {
if (v < ) {
return Mathround(v * ) + mins;
} else if (Mathfloor(v) !== v) {
var min = v Mathfloor(v);
return Mathfloor(v) + h + Mathround(min * ) + m;
} else {
return v + hour + (v === ? : s);
}
}
})
}{
text: Assigned To
flex:
dataIndex: user
sortable: true
}]
});
});