ext treepanel 实例

在html的页面里的代码：

 

<div id="combotree" style="float:left;display:block;">
    	<!--先隐藏此树形-->
        <div id="divmodule" style="float:left;display:none;position: absolute;"></div>
    	<!--点击文本框的时候，显示树形结构 -->
        <input type="text" id="input_module" name="input_module" readonly onclick="document.getElementById('divmodule').style.display='block'">
       	<!-- 这个hidden用来向后台传数据 -->
        <input type="hidden" id="tomodule" name="tomodule">
</div>

 

下面是EXT 部分，

此部分代码放在 Ext.onReady(function(){ }); 里

var _Tree = Ext.tree;  
    // 定义根节点的Loader  
    var _treeloader = new _Tree.TreeLoader({  
            // dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置  
            });  
    // 添加一个树形面板  
    var _treepanel = new _Tree.TreePanel({  
        // renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。  
        el : 'divmodule',// 将树形添加到一个指定的div中,非常重要！  
        region : 'west',  
        title : '功能模块',  
        width : 200,//面板宽度  
        minSize : 180,  
        maxSize : 250,  
        split : true,  
        autoHeight : false,  
        frame : true,// 美化界面  
        // title : '可编辑和拖动的异步树',//标题  
        // autoScroll : true, // 自动滚动  
        enableDD : true,// 是否支持拖拽效果  
        containerScroll : true,// 是否支持滚动条  
        rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性  
        border : true, // 边框  
        animate : true, // 动画效果  
        loader : _treeloader // 树加载  
        });  
          
        // 异步加载根节点  
       var _rootnode = new _Tree.AsyncTreeNode({  
                id : '0',  
                text : '请选择...',  
                draggable : false,// 根节点不容许拖动  
                expanded : true  
            });  
      // 为tree设置根节点  
      _treepanel.setRootNode(_rootnode);  
        
      // 响应加载前事件，传递node参数  
     _treepanel.on('beforeload', function(node) {  
           _treepanel.loader.dataUrl = 'getModuleList_dao.asp?id=' + node.id; // 定义子节点的Loader  
		});  
	 
  	_treepanel.on("append", function(a,b,node) {
		//根据实际情况来判定叶子节点
               //alert(node.getDepth());
		if (node.getDepth()==3)
		{
			node.leaf=true;
		}else{
			node.leaf=false;
		}
	});
    // 渲染树形  
    _treepanel.render();  
    // 展开节点,第一个参数表示是否级联展开子节点  
    _rootnode.expand(false);  
	//属性的点击时间
	 _treepanel.on('click', function(node,e){
		 if (!node.isLeaf()) {  //不是叶子节点，就stop
            e.stopEvent();  
		 }else{
			document.getElementById("divmodule").style.display="none"; //隐藏树形结构的div
			document.getElementById("input_module").value=node.text; //将选中的节点的显示的值赋予文本框
			document.getElementById("tomodule").value=node.id;//用hidden保存实际节点的id值
		}
	}); 

 

loader.dataurl 去获取需要的数据，本次实验中，用json格式的记录数据，数据格式：

[{id:"1",text:"AAA"},{id:"2",text:"BBB"}]

 

到此结束。如果有不懂地方可以参考：

http://youshini.iteye.com/blog/1072961