Ext.form.ComboBox，Extjs-树 Ext.tree.TreePanel



Ext.form.ComboBox 属性详解（见注释）及使用方法
定义一个ComboBox：

 

1. Wayfoon.YearComb = new Ext.form.ComboBox({
2.     id:'cbid',
3.     name:'year',//name只是改下拉的名称
4.     hiddenName:'hyear',//提交到后台的input的name
5.     width : 80,
6.     store : Wayfoon.Year,//填充数据
7.     emptyText : '请选择',
8.     mode : 'local',//数据模式，local代表本地数据
9.     readOnly : true,//是否只读
10.     value : (new Date()).YEAR,//默认值,要设置为提交给后台的值，不要设置为显示文本
11.     triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all
12.     allowBlank : false,//不允许为空
13.     valueField : 'value',//值
14.     displayField : 'text',//显示文本
15.     editable: false,//是否允许输入
16.     forceSelection: true,//必须选择一个选项
17.     blankText:'请选择'//该项如果没有选择，则提示错误信息
18. });

工具栏常用配置：

1. 工具栏常用元素表: 
2. Ext.Toolbar.Button              可加入工具栏的按钮组件 
3. Ext.Toolbar.Fill                用于充满工具条的空白元素 
4. Ext.Toolbar.Item                基类，为其子类提供工具栏基本功能 
5. Ext.Toolbar.Separator           工具栏分割符 
6. Ext.Toolbar.SplitButton         菜单按钮 
7. Ext.Toolbar.TextItem            文本元素 
8.  
9. 工具栏常用方法表: 
10. addButton()        Object/Array config                 添加一个或多个Ext.Toolbar.Button/SplitButton对象 
11. addElement()       Mixed el                            添加Element元素 
12. addField()         Ext.form.Field                      添加表单组件 
13. addFill()                                              添加用于充满工具条的空白元素 
14. addSeparator()                                         添加工具栏分隔符 
15. addText()          String text                         添加字符串 
16. add()              Mixed arg1,Mixed arg2,Mixed etc     向工具栏添加元素，支持变长参数比爱哦，可一次加入多个工具栏元素 

Extjs-树 Ext.tree.TreePanel：

<script type="text/javascript" defer>

Ext.onReady(function(){

1. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
2. var tree = new Ext.tree.TreePanel({
3. region: 'center',
4. //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
5. collapsible: true,
6. title: '标题',//标题文本
7. width: 200,
8. border : false,//表框
9. autoScroll: true,//自动滚动条
10. animate : true,//动画效果
11. rootVisible: true,//根节点是否可见
12. split: true,
13. tbar:[{
14. text:'展开',
15. handler:function(){
16. tree.expandAll();
17. }
18. },'-',{
19. text:'折叠',
20. handler:function(){
21. tree.collapseAll();
22. tree.root.expand();
23. }
24. }],
25. listeners: {
26. click: function(node) {
27. //得到node的text属性
28. Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text+"'");
29. }
30. }
31. });
32. var root = new Ext.tree.TreeNode({text:'我是根'});
33. var root_node1 = new Ext.tree.TreeNode({text:'我是根的1枝'});
34. var root_node2 = new Ext.tree.TreeNode({text:'我是根的2枝'});
35. //插入节点为该节点的最后一个子节点
36. root.appendChild(root_node1);
37. root.appendChild(root_node2);
38. //设置根节点
39. tree.setRootNode(root);
40. new Ext.Viewport({
41. items: [tree]
42. });
43. });
44. </script>

2.使用TreeLoader获得后台数据

每个节点最后一级必须是叶子节点,否则会出现无限循环
TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true },
5. { text : '01-02' , leaf : true }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

index.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. collapsible: true,
7. title: 'TreeLoader获得后台数据',
8. width: 200,
9. border : false,
10. autoScroll: true,
11. animate : true,
12. rootVisible: false,
13. split: true,
14. loader : new Ext.tree.TreeLoader({
15. dataUrl : 'list.txt'
16. }),
17. root: new Ext.tree.AsyncTreeNode({
18. //进入时是否展开
19. expanded:false,
20. text:'根节点'
21. }),
22. listeners: {
23. afterrender: function(node) {
24. tree.expandAll();//展开树
25. }
26. }
27. });
28. new Ext.Viewport({
29. items: [tree]
30. });
31. });
32. </script>

3.读取本地JSON数据

1. 因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,
2. 如果退回到每个节点都使用new来生成,又实在太麻烦,
3. 那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
7. collapsible: true,
8. title: '标题',//标题文本
9. width: 200,
10. border : false,//表框
11. autoScroll: true,//自动滚动条
12. animate : true,//动画效果
13. rootVisible: false,//根节点是否可见
14. split: true,
15. loader : new Ext.tree.TreeLoader(),
16. root : new Ext.tree.AsyncTreeNode({
17. text:'我是根',
18. children:[{
19. text : '01',
20. children : [
21. { text : '01-01' , leaf : true },
22. { text : '01-02' , leaf : true }
23. ]
24. },{
25. text :'02',
26. children : [
27. { text : '02-01' , leaf : true },
28. { text : '02-02' , leaf : true }
29. ]
30. }]
31. }),
32. listeners: {
33. afterrender: function(node) {
34. tree.expandAll();//展开树
35. }
36. }
37. });
38. new Ext.Viewport({
39. items: [tree]
40. });
41. });
42. </script>

4.使用JSP提供后台数据

1. 树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,
2. 而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,
3. 就知道是哪个节点正在执行展开,
4. 如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子

list.jsp

1. <%@ page language="java" pageEncoding="UTF-8"%>
2. <%
3. request.setCharacterEncoding("UTF-8");
4. response.setCharacterEncoding("UTF-8");
5. //获取node参数,对应的是正在展开的节点id
6. String node = request.getParameter("node");
7. System.out.println("node="+node);
8. String json =
9. "["+
10. "{id:1,text:'01',"+
11. "children:["+
12. "{id:11,text:'01-01',leaf:true},"+
13. "{id:12,text:'01-02',leaf:true}"+
14. "]}"+
15. ",{id:2,text:'02',"+
16. "children:["+
17. "{id:21,text:'02-01',leaf:true},"+
18. "{id:22,text:'02-02',leaf:true}"+
19. "]}"+
20. "]";
21. response.getWriter().write(json);
22. %>

index.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. collapsible: true,
7. title: '标题',
8. width: 200,
9. border : false,
10. autoScroll: true,
11. animate : true,
12. rootVisible: false,
13. split: true,
14. loader : new Ext.tree.TreeLoader({
15. dataUrl : 'list.jsp'
16. }),
17. root : new Ext.tree.AsyncTreeNode({
18. //设置id,让后台知道应该在何时返回根节点的子点数据
19. id : '0',
20. text : '我是根'
21. }),
22. listeners: {
23. afterrender: function(node) {
24. tree.expandAll();//展开树
25. }
26. }
27. });
28. new Ext.Viewport({
29. items: [tree]
30. });
31. });
32. </script>

5.树的事件

1. listeners: {
2. click: function(node) {
3. Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text);
5. },
6. dblclick:function(node){
7. alert('你双击了'+node);
8. },
9. expandnode:function(node){
10. alert(node+'展开了'+node.attributes.text);
11. },
12. collapsenode:function(node){
13. alert(node+'折叠了'+node.attributes.text);
14. }
15. }

6.右边菜单

效果图

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true },
5. { text : '01-02' , leaf : true }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

index.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var node_id;
5. var tree = new Ext.tree.TreePanel({
6. region: 'center',
7. collapsible: true,
8. title: '右键菜单',
9. width: 200,
10. border : false,
11. animate : true,
12. rootVisible: false,
13. autoScroll: true,
14. split: true,
15. loader : new Ext.tree.TreeLoader({
16. dataUrl : 'list.txt'
17. }),
18. root: new Ext.tree.AsyncTreeNode({
19. //设置id,让后台知道应该在何时返回根节点的子点数据
20. id : '0',
21. text : '我是根'
22. }),
23. listeners: {
24. afterrender: function(node) {
25. //展开树
26. tree.expandAll();
27. }
28. }
29. });
30. var cc = new Ext.menu.Menu({
31. items :[{
32. text: '增加',
33. handler : function(){
34. alert(node_id.attributes.text);
35. cc.hide();//隐藏
36. }
37. },{
38. text: '删除',
39. handler : function(){
40. alert('删除');
41. }
42. },{
43. text: '修改',
44. handler : function(){
45. alert('修改');
46. }
47. }]
48. });
49. tree.on('contextmenu',function(node,e){
50. e.preventDefault();//阻止浏览器默认弹出功能菜单
51. node.select();//选中当前节点
52. //var array = new Array(500,500);//可以自定义坐标
53. var array = e.getXY();//获取事件的页面坐标
54. cc.showAt(array);//在指定的位置显示该菜单
55. node_id = node;
56. });
57. new Ext.Viewport({
58. items: [tree]
59. });
60. });
61. </script>

7.给树节点设置图片和超链接

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },
5. { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

8.修改树节点的标题

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true },
5. { text : '01-02' , leaf : true }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

index.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. collapsible: true,
7. title: '修改节点标题',
8. width: 200,
9. border : false,
10. animate : true,
11. rootVisible: false,
12. autoScroll: true,
13. split: true,
14. loader : new Ext.tree.TreeLoader({
15. dataUrl : 'list.txt'
16. }),
17. root: new Ext.tree.AsyncTreeNode({
18. id : '0',
19. text : '我是根'
20. }),
21. listeners: {
22. afterrender: function(node) {
23. //展开树
24. tree.expandAll();
25. }
26. }
27. });
29. //为树节点提供即时的编辑功能
30. var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({
31. allowBlank : false
32. }));
33. /*
34. 编辑器开始初始化,但在修改值之前触发,
35. 若事件句柄返回false则取消整个编辑事件
36. editor : treeEditor本身
37. value : 正被设置的值
38. */
39. treeEditor.on('beforestartedit',function(editor,element,value){
40. var treeNode = editor.editNode;
41. var boolean = treeNode.isLeaf();
42. return boolean;
43. });
44. /*
45. 完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据
46. editor : treeEditor本身
47. value : 修改后的值
48. startValue : 改变后的值
49. */
50. treeEditor.on('complete',function(editor,value,startValue){
51. alert('将要设置的值: '+editor.editNode.text+' 原来的值: '+startValue+" 改变后的值: "+value)
52. });
54. new Ext.Viewport({
55. items: [tree]
56. });
57. });
58. </script>

9.树的拖放

1. 如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可
2. 不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true },
5. { text : '01-02' , leaf : true }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

inde.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. collapsible: true,
7. title: '树的拖动',
8. width: 200,
9. border : false,
10. animate : true,
11. rootVisible: false,
12. autoScroll: true,
13. split: true,
14. enableDD : true,//支持拖放
15. loader : new Ext.tree.TreeLoader({
16. dataUrl : 'list.txt'
17. }),
18. root: new Ext.tree.AsyncTreeNode({
19. id : '0',
20. text : '我是根'
21. }),
22. listeners: {
23. afterrender: function(node) {
24. //展开树
25. tree.expandAll();
26. }
27. }
28. });
29. new Ext.Viewport({
30. items: [tree]
31. });
32. });
33. </script>

9.1 节点拖放的三种形式

1. append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志
2. above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线
3. below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头

9.2叶子不能append

1. tree.on('nodedragover',function(e){
2. //获取事件的对象
3. var node = e.target;//当鼠标指针经过的节点
4. if(node.leaf){
5. n.leaf = false;
6. }
7. return true;
8. });

9.3 判断拖放的目标

1. tree.on('nodedrop',function(e){
2. Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);
3. });

10.树的过滤器Ext.tree.TreeFilter

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true },
5. { text : '01-02' , leaf : true }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true },
11. { text : '02-02' , leaf : true }
12. ]
13. }]

index.jsp

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
4. var tree = new Ext.tree.TreePanel({
5. region: 'center',
6. collapsible: true,
7. title: 'tree过滤器',
8. width: 400,
9. border : false,
10. animate : true,
11. rootVisible: false,
12. autoScroll: true,
13. split: true,
14. loader : new Ext.tree.TreeLoader({
15. dataUrl : 'list.txt'
16. }),
17. root : new Ext.tree.AsyncTreeNode({
18. //设置id,让后台知道应该在何时返回根节点的子点数据
19. id : '0',
20. text : '我是根'
21. }),
22. listeners: {
23. afterrender: function(node) {
24. //展开树
25. tree.expandAll();
26. }
27. },
28. tbar:[{
29. text:'显示02',
30. handler:function(){
31. treeFiler.filter('02');//通过指定的属性过滤数据
32. }
33. },'-',{
34. text:'显示全部',
35. handler:function(){
36. treeFiler.clear();//清理现在的过滤
37. }
38. },'-',{
39. xtype : 'textfield',
40. //为HTML的input输入字段激活键盘事件的代理
41. enableKeyEvents : true,
42. listeners : {
43. //这个事件只能在enableKeyEvents = true可用
44. keyup : function(e){
45. var t = this.getValue()
46. /****************过滤时应该避开叶子节点**********************/
47. //传递的字符串参数被正则表达式读取
48. var es = Ext.escapeRe(t);
49. var re = new RegExp(es,'i');
50. //通过一个函数过滤,函数返回true,那么该节点将保留
51. treeFiler.filterBy(function(n){
52. return !n.isLeaf() || re.test(n.text);
53. });
54. /**********不匹配的叶子节点的父节点也隐藏**************/
55. hiddenPkgs =[];
56. //从该节点开始逐层下报(Bubbles up)节点,上报过程中对每个节点执行指定的函数
57. tree.root.cascade(function(n){
58. //当节点有子节点的时候n.ui.ctNode.offsetHeight大于3
59. if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){
60. n.ui.hide();
61. hiddenPkgs.push(n);
62. }
63. });
64. }
65. }
66. }]
67. });
68. var treeFiler = new Ext.tree.TreeFilter(tree,{
69. clearBlank : true,//如果查询的字符串为空字符串,就执行clear()
70. //每次过滤之前先执行clear()负责会在上次过滤结果的基础上进行查询
71. autoClear : true
72. });
74. new Ext.Viewport({
75. items: [tree]
76. });
77. });
78. </script>

11.利用TreeSorter对树进行排序

1. TreeSorter是一个专门用来对树节点进行排序的工具
2. caseSensitive 区分大小写,默认为false不区分大小写
3. dir 排列方式
4. folderSort 将叶子节点排列到非叶子节点后面 默认为false
5. leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点
6. property 根据节点属性排序,默认为text

代码

1. new Ext.tree.TreeSorter(tree,{
2. folderSort : true
3. });

12.树形节点视图 Ext.tree.TreeNodeUI

1. Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件.
2. 在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI.
3. 如果有任何一个属性存在,它就会使用这个属性创建自己的视图.
4. 如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图.
5. 因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图.
6. 可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI

效果图

list.txt

1. [{
2. text : '01',
3. children : [
4. { text : '01-01' , leaf : true , checked : false },
5. { text : '01-02' , leaf : true , checked : false }
6. ]
7. },{
8. text :'02',
9. children : [
10. { text : '02-01' , leaf : true , checked : false },
11. { text : '02-02' , leaf : true , checked : false }
12. ]
13. }]

index.jsp

1. <style type="text/css">
2. .big {
3. font-weight: bold;
4. }
5. </style>
6. <script type="text/javascript" defer>
7. Ext.onReady(function(){
8. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
9. var tree = new Ext.tree.TreePanel({
10. region: 'center',
11. collapsible: true,
12. title: '树形节点视图',
13. width: 200,
14. border : false,
15. autoScroll: true,
16. animate : true,
17. rootVisible: false,
18. split: true,
19. loader : new Ext.tree.TreeLoader({
20. dataUrl : 'list.txt'
21. }),
22. root : new Ext.tree.AsyncTreeNode({
23. //设置id,让后台知道应该在何时返回根节点的子点数据
24. id : '0',
25. text : '我是根'
26. }),
27. listeners: {
28. afterrender: function(node) {
29. //展开树
30. tree.expandAll();
31. }
32. }
33. });
34. new Ext.Viewport({
35. items: [tree]
36. });
37. tree.on('click',function(node){
38. //当用户点击一个节点,会获得节点对应的Ext.tree.TreeNodeUI实例
39. var treeNodeUI = node.ui;
40. //最后调用addClass()方法把文字转化为粗体
41. treeNodeUI.addClass('big');
42. (
43. function(){
44. treeNodeUI.removeClass('big');
45. }
46. ).defer(1000);
47. });
48. });
49. </script>

1. treeNodeUI的方法
2. getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的
3. &lt;a&gt;标签,包含图标的&lt;img&gt;标签,包含文字的&lt;span&gt;标签部分
4. hide()和show()函数可以控制树形节点是否隐藏
5. isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false

13.表格与树的结合 Ext.ux.tree.ColumnTree()

1. Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,
2. 我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件
3. 需要注意的是:我们要给每一个节点设置uiProvider:'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图

效果图

list.jsp

1. <%@ page language="java" pageEncoding="UTF-8"%>
2. <%
3. request.setCharacterEncoding("UTF-8");
4. response.setCharacterEncoding("UTF-8");
5. //获取node参数,对应的是正在展开的节点id
6. String node = request.getParameter("node");
7. System.out.println("node="+node);
8. String json =
9. "["+
10. "{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+
11. "children:["+
12. "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+
13. "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+
14. "]}"+
15. ",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+
16. "children:["+
17. "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+
18. "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+
19. "]}"+
20. "]";
21. response.getWriter().write(json);
22. %>

index.jsp

1. <!-- 使用ColumnTree需要带入这两个文件 -->
2. <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>
3. <script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>
4. <script type="text/javascript" defer>
5. Ext.onReady(function(){
6. Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
7. var tree = new Ext.tree.ColumnTree({
8. //columnTree的宽度要等于columns列总和的宽度,否则会出现错行
9. width: 451,
10. height: 200,
11. rootVisible:false,
12. autoScroll:false,
13. title: '示例',
14. columns:[{
15. header:'科目',
16. width:230,
17. dataIndex:'km'
18. },{
19. header:'课时',
20. width:100,
21. dataIndex:'ks'
22. },{
23. header:'讲师',
24. width:100,
25. dataIndex:'js'
26. }],
27. loader: new Ext.tree.TreeLoader({
28. dataUrl:'list.jsp',
29. uiProviders:{
30. 'col': Ext.tree.ColumnNodeUI
31. }
32. }),
33. root: new Ext.tree.AsyncTreeNode({
34. //设置id,让后台知道应该在何时返回根节点的子点数据
35. id : '0',
36. text:'我是根'
37. }),
38. listeners: {
39. afterrender: function(node) {
40. //展开树
41. tree.expandAll();
42. }
43. }
44. });
45. new Ext.Viewport({
46. items : [tree]
47. });
48. });
49. </script>