ExtJs之结构树 Ext.tree.panel详细用法

1.简单的树

效果图

代码

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

2.使用TreeLoader获得后台数据

  1. 每个节点最后一级必须是叶子节点,否则会出现无限循环  
  2. TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果  
每个节点最后一级必须是叶子节点,否则会出现无限循环
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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true },
            { text : '01-02' , leaf : true }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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>  
<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var tree = new Ext.tree.TreePanel({
			region: 'center',
	        collapsible: true,
	        title: 'TreeLoader获得后台数据',
	        width: 200,
	        border : false,
	        autoScroll: true,
	        animate : true,
	        rootVisible: false,
	        split: true,
	        loader : new Ext.tree.TreeLoader({
	        	dataUrl : 'list.txt'
			}),
			root: new Ext.tree.AsyncTreeNode({
	        	//进入时是否展开
	        	expanded:false,
	        	text:'根节点'
	        }),
	        listeners: {    
               	afterrender: function(node) {    
               		tree.expandAll();//展开树 
               	}    
            }
		});
		new Ext.Viewport({
			items: [tree]
		});
	});
</script>
3.读取本地JSON数据

  1. 因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,  
  2. 如果退回到每个节点都使用new来生成,又实在太麻烦,  
  3. 那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢  
因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,
如果退回到每个节点都使用new来生成,又实在太麻烦,
那么能不能让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>  
<script type="text/javascript" defer>  
    Ext.onReady(function(){  
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
        var tree = new Ext.tree.TreePanel({  
            region: 'center',  
            //True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条  
            collapsible: true,  
            title: '标题',//标题文本  
            width: 200,  
            border : false,//表框  
            autoScroll: true,//自动滚动条  
            animate : true,//动画效果  
            rootVisible: false,//根节点是否可见  
            split: true,  
            loader : new Ext.tree.TreeLoader(),  
            root : new Ext.tree.AsyncTreeNode({  
                text:'我是根',  
                children:[{  
					text : '01',  
			        children : [  
			            { text : '01-01' , leaf : true },
			            { text : '01-02' , leaf : true }  
			        ]  
				},{  
			        text :'02',  
			        children : [  
			          	{ text : '02-01' , leaf : true },
			            { text : '02-02' , leaf : true }
			        ]
				}]  
            }),
            listeners: {      
                afterrender: function(node) {      
                    tree.expandAll();//展开树   
                }      
            }   
        });  
        new Ext.Viewport({  
            items: [tree]  
        });  
    });  
</script>
4.使用JSP提供后台数据

  1. 树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,  
  2. 而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,  
  3. 就知道是哪个节点正在执行展开,  
  4. 如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子  
树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,
而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,
就知道是哪个节点正在执行展开,
如果返回的子节点数据包含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. %>  
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	//获取node参数,对应的是正在展开的节点id
	String node = request.getParameter("node");
	System.out.println("node="+node);
	String json =
	"["+
	"{id:1,text:'01',"+
		"children:["+
			"{id:11,text:'01-01',leaf:true},"+
			"{id:12,text:'01-02',leaf:true}"+
		 "]}"+
	",{id:2,text:'02',"+
		"children:["+
		   	"{id:21,text:'02-01',leaf:true},"+
			"{id:22,text:'02-02',leaf:true}"+
		 "]}"+
	"]";
	response.getWriter().write(json);
%>

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>  
<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var tree = new Ext.tree.TreePanel({
			region: 'center',  
        	collapsible: true,  
           	title: '标题',   
           	width: 200,  
       		border : false, 
       		autoScroll: true,   
       		animate : true,  
       		rootVisible: false, 
           	split: true,
			loader : new Ext.tree.TreeLoader({
				dataUrl : 'list.jsp'
			}),
			root : new Ext.tree.AsyncTreeNode({
				//设置id,让后台知道应该在何时返回根节点的子点数据
				id : '0',
				text : '我是根'
			}),
			listeners: {    
               	afterrender: function(node) {    
               		tree.expandAll();//展开树 
               	}    
            }
		});
		new Ext.Viewport({
			items: [tree]
		});
	});
</script>
5.树的事件

  1. listeners: {  
  2.     click: function(node) {  
  3.         Ext.Msg.alert('消息''你点击了: "' + node.attributes.text);  
  4.          
  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. }  
listeners: {
    click: function(node) {
        Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text);
       
    },
    dblclick:function(node){
    	alert('你双击了'+node);
    },
    expandnode:function(node){
    	alert(node+'展开了'+node.attributes.text);
    },
    collapsenode:function(node){
    	alert(node+'折叠了'+node.attributes.text);
    }
}

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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true },
            { text : '01-02' , leaf : true }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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>  
<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var node_id;
		var tree = new Ext.tree.TreePanel({
			region: 'center',
	        collapsible: true,
	        title: '右键菜单',
	        width: 200,
	        border : false,
	        animate : true,
	        rootVisible: false,
	        autoScroll: true,
	        split: true,
	        loader : new Ext.tree.TreeLoader({
	        	dataUrl : 'list.txt'
			}),
			root: new Ext.tree.AsyncTreeNode({
		        //设置id,让后台知道应该在何时返回根节点的子点数据   
               	id : '0',  
                text : '我是根'
	        }),
	        listeners: {    
               	afterrender: function(node) {    
                  		//展开树    
                  		tree.expandAll();
                  	}    
               }
		});
		var cc = new Ext.menu.Menu({
			items :[{
				text: '增加',
				handler : function(){
					alert(node_id.attributes.text);
					cc.hide();//隐藏
				}
			},{
				text: '删除',
				handler : function(){
					alert('删除');
				}
			},{
				text: '修改',
				handler : function(){
					alert('修改');
				}
			}]
		});
		tree.on('contextmenu',function(node,e){
			e.preventDefault();//阻止浏览器默认弹出功能菜单
			node.select();//选中当前节点
			//var array = new Array(500,500);//可以自定义坐标
			var array = e.getXY();//获取事件的页面坐标
			cc.showAt(array);//在指定的位置显示该菜单
			node_id = node;
		});
		new Ext.Viewport({
			items: [tree]
		});
	});
</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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },
            { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true },
            { text : '01-02' , leaf : true }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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.         });    
  28.             
  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.         });    
  53.             
  54.         new Ext.Viewport({    
  55.             items: [tree]    
  56.         });    
  57.     });    
  58. </script>  
<script type="text/javascript" defer>  
	Ext.onReady(function(){  
	    Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
	    var tree = new Ext.tree.TreePanel({  
	        region: 'center',  
	        collapsible: true,  
	        title: '修改节点标题', 
	        width: 200,  
	        border : false,
	        animate : true,
	        rootVisible: false,
	        autoScroll: true,
	        split: true,  
	        loader : new Ext.tree.TreeLoader({  
	            dataUrl : 'list.txt'  
	        }),  
	        root: new Ext.tree.AsyncTreeNode({  
	            id : '0',    
	            text : '我是根'  
	        }),
	        listeners: {    
                afterrender: function(node) {    
                   //展开树    
                   tree.expandAll();    
                }
            }  
	    });  
	      
	   	//为树节点提供即时的编辑功能  
	    var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({  
	        allowBlank : false  
	    }));  
	    /* 
	      	编辑器开始初始化,但在修改值之前触发, 
	       	若事件句柄返回false则取消整个编辑事件 
	       	editor : treeEditor本身 
			value : 正被设置的值 
	    */  
	    treeEditor.on('beforestartedit',function(editor,element,value){  
	        var treeNode = editor.editNode;  
	        var boolean  = treeNode.isLeaf();  
	        return boolean;  
	    });  
	    /* 
	     	完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据 
	        editor : treeEditor本身 
	        value : 修改后的值 
	        startValue : 改变后的值 
	    */  
	    treeEditor.on('complete',function(editor,value,startValue){  
	        alert('将要设置的值: '+editor.editNode.text+' 原来的值: '+startValue+" 改变后的值: "+value)  
	    });  
	      
	    new Ext.Viewport({  
	        items: [tree]  
	    });  
	});  
</script>
9.树的拖放

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

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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true },
            { text : '01-02' , leaf : true }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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>  
<script type="text/javascript" defer>  
    Ext.onReady(function(){  
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
        var tree = new Ext.tree.TreePanel({  
            region: 'center',  
            collapsible: true,  
            title: '树的拖动', 
            width: 200,  
            border : false,
            animate : true, 
            rootVisible: false,
            autoScroll: true,
            split: true,  
            enableDD : true,//支持拖放  
            loader : new Ext.tree.TreeLoader({  
                dataUrl : 'list.txt'  
            }),  
            root: new Ext.tree.AsyncTreeNode({  
                id : '0',    
                text : '我是根'  
            }),
            listeners: {    
                afterrender: function(node) {    
                   //展开树    
                   tree.expandAll();    
                }
            }  
        });  
        new Ext.Viewport({  
            items: [tree]  
        });
    });  
</script>
9.1 节点拖放的三种形式

  1. append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志  
  2. above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线  
  3. below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头  
append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志
above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线
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. });  
tree.on('nodedragover',function(e){
	//获取事件的对象
	var node = e.target;//当鼠标指针经过的节点
	if(node.leaf){
		n.leaf = false;
	}
	return true;
});

9.3 判断拖放的目标

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

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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true },
            { text : '01-02' , leaf : true }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]
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.         });      
  73.                
  74.         new Ext.Viewport({      
  75.             items: [tree]      
  76.         });      
  77.     });      
  78. </script>  
<script type="text/javascript" defer>    
	Ext.onReady(function(){    
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
		var tree = new Ext.tree.TreePanel({    
		    region: 'center',    
		    collapsible: true,    
		    title: 'tree过滤器',   
		    width: 400,    
		    border : false,   
		    animate : true,    
		    rootVisible: false,   
		    autoScroll: true,  
		    split: true,    
		    loader : new Ext.tree.TreeLoader({  
		       dataUrl : 'list.txt'  
		    }),  
			root : new Ext.tree.AsyncTreeNode({  
			    //设置id,让后台知道应该在何时返回根节点的子点数据  
			    id : '0',  
			    text : '我是根'  
			}),  
			listeners: {  
			    afterrender: function(node) {  
			       //展开树  
			       tree.expandAll();  
			    }  
			},  
			tbar:[{  
			    text:'显示02',  
			    handler:function(){  
			    	treeFiler.filter('02');//通过指定的属性过滤数据  
			    }  
			},'-',{  
			    text:'显示全部',  
			    handler:function(){  
			    	treeFiler.clear();//清理现在的过滤  
			    }  
			},'-',{  
			    xtype : 'textfield',  
			    //为HTML的input输入字段激活键盘事件的代理  
			    enableKeyEvents : true,  
			    listeners  : {  
			        //这个事件只能在enableKeyEvents = true可用  
			        keyup : function(e){  
			            var t = this.getValue()  
			            /****************过滤时应该避开叶子节点**********************/  
			            //传递的字符串参数被正则表达式读取  
			            var es = Ext.escapeRe(t);  
			            var re = new RegExp(es,'i');  
			            //通过一个函数过滤,函数返回true,那么该节点将保留  
			            treeFiler.filterBy(function(n){  
			                return !n.isLeaf() || re.test(n.text);  
			            });  
			            /**********不匹配的叶子节点的父节点也隐藏**************/  
			            hiddenPkgs =[];  
			            //从该节点开始逐层下报(Bubbles up)节点,上报过程中对每个节点执行指定的函数  
			            tree.root.cascade(function(n){  
			                //当节点有子节点的时候n.ui.ctNode.offsetHeight大于3  
			                if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){  
			                    n.ui.hide();  
			                    hiddenPkgs.push(n);  
			                }  
			            });  
			        }     
			    }  
			}]  
		});  
		var treeFiler = new Ext.tree.TreeFilter(tree,{    
		    clearBlank : true,//如果查询的字符串为空字符串,就执行clear()    
		    //每次过滤之前先执行clear()负责会在上次过滤结果的基础上进行查询    
		    autoClear : true    
		});    
             
	    new Ext.Viewport({    
	        items: [tree]    
	    });    
	});    
</script>
11.利用TreeSorter对树进行排序

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

代码

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

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  
Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件.
在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI.
如果有任何一个属性存在,它就会使用这个属性创建自己的视图.
如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图.
因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图.
可以通过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. }]  
[{  
        text : '01',  
        children : [  
            { text : '01-01' , leaf : true , checked : false },
            { text : '01-02' , leaf : true , checked : false }  
        ]  
	},{  
        text :'02',  
        children : [  
          	{ text : '02-01' , leaf : true , checked : false },
            { text : '02-02' , leaf : true , checked : false }
        ]
}]
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>  
<style type="text/css">
.big {
    font-weight: bold;
}
</style>
<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var tree = new Ext.tree.TreePanel({
			region: 'center',			
			collapsible: true,
			title: '树形节点视图',
			width: 200,
			border : false,
			autoScroll: true,
			animate : true,
			rootVisible: false,
			split: true,
			loader : new Ext.tree.TreeLoader({
				dataUrl : 'list.txt'
			}),
			root : new Ext.tree.AsyncTreeNode({
				//设置id,让后台知道应该在何时返回根节点的子点数据
				id : '0',
				text : '我是根'
			}),
			listeners: {
			    afterrender: function(node) {
			       //展开树
			       tree.expandAll();
			    }
			}
		});
		new Ext.Viewport({
			items: [tree]
		});
		tree.on('click',function(node){
			//当用户点击一个节点,会获得节点对应的Ext.tree.TreeNodeUI实例
			var treeNodeUI = node.ui;
			//最后调用addClass()方法把文字转化为粗体
			treeNodeUI.addClass('big');
			(
				function(){
					treeNodeUI.removeClass('big');
				}
			).defer(1000);
		});
	});
</script>

  1. treeNodeUI的方法  
  2. getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的  
  3. <a>标签,包含图标的<img>标签,包含文字的<span>标签部分  
  4. hide()和show()函数可以控制树形节点是否隐藏  
  5. isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false  
treeNodeUI的方法
getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的
<a>标签,包含图标的<img>标签,包含文字的<span>标签部分
hide()和show()函数可以控制树形节点是否隐藏
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,用它来作为显示树形节点的视图  
Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,
我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件
需要注意的是:我们要给每一个节点设置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. %>  
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	//获取node参数,对应的是正在展开的节点id
	String node = request.getParameter("node");
	System.out.println("node="+node);
	String json =
	"["+
	"{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+
		"children:["+
			"{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+
			"{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+
		 "]}"+
	",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+
		"children:["+
		   	"{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+
			"{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+
		 "]}"+
	"]";
	response.getWriter().write(json);
%>

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>  
<!-- 使用ColumnTree需要带入这两个文件 -->
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>
<script type="text/javascript" defer>
	Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var tree = new Ext.tree.ColumnTree({
	       	//columnTree的宽度要等于columns列总和的宽度,否则会出现错行
	       	width: 451,
	        height: 200,
	        rootVisible:false,
	        autoScroll:false,
	        title: '示例',
	        columns:[{
	            header:'科目',
	            width:230,
	            dataIndex:'km'
	        },{
	            header:'课时',
	            width:100,
	            dataIndex:'ks'
	        },{
	            header:'讲师',
	            width:100,
	            dataIndex:'js'
	        }],
	        loader: new Ext.tree.TreeLoader({
	            dataUrl:'list.jsp',
	            uiProviders:{
	                'col': Ext.tree.ColumnNodeUI
	            }
	        }),
	        root: new Ext.tree.AsyncTreeNode({
	            //设置id,让后台知道应该在何时返回根节点的子点数据
	            id : '0',
	            text:'我是根'
	        }),
	        listeners: {
			    afterrender: function(node) {
			       //展开树
			       tree.expandAll();
			    }
			}
	    });
	    new Ext.Viewport({
	    	items : [tree]
	    });
	});
</script>






 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页