分享两种comboBoxTree下拉列表树的写法

第一种方式，经过仔细拓展后的，看起来不错，其实有点毛病就是点击下拉列表出来后在点击节点想分开时却有缩了回去，自己解决吧

   ComoboBoxTree-min.js

   

Ext.ux.ComboBoxTree = function() {

this.treeId = Ext.id() + "-tree";

this.maxHeight = arguments[0].maxHeight || arguments[0].height

|| this.maxHeight;

this.tpl = new Ext.Template('<tpl for="."><div style="height:'

+ this.maxHeight + 'px"><div id="' + this.treeId

+ '"></div></div></tpl>');

this.store = new Ext.data.SimpleStore( {

fields : [],

data : [ [] ]

});

this.selectedClass = "";

this.mode = "local";

this.triggerAction = "all";

this.onSelect = Ext.emptyFn;

this.editable = false;

this.selectNodeModel = arguments[0].selectNodeModel || "exceptRoot";

Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments)

};

Ext.extend(Ext.ux.ComboBoxTree, Ext.form.ComboBox, {

expand : function() {

Ext.ux.ComboBoxTree.superclass.expand.call(this);

if (!this.tree.rendered) {

this.tree.height = this.maxHeight;

this.tree.border = false;

this.tree.autoScroll = true;

if (this.tree.xtype) {

this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype)

}

this.tree.render(this.treeId);

var B = this;

this.tree.on("click", function(F) {

var E = (F == B.tree.getRootNode());

var D = B.selectNodeModel;

var C = F.isLeaf();

if (E && D != "all") {

return

} else {

if (D == "folder" && C) {

return

} else {

if (D == "leaf" && !C) {

return

}

}

}

B.setValue(F);

B.collapse()

});

var A = this.tree.getRootNode();

if (!A.isLoaded()) {

A.reload()

}

}

},

setValue : function(A) {

var B = A.text;

this.lastSelectionText = B;

if (this.hiddenField) {

this.hiddenField.value = A.id

}

Ext.form.ComboBox.superclass.setValue.call(this, B);

this.value = A.id

},

getValue : function() {

return typeof this.value != "undefined" ? this.value : ""

}

});

Ext.reg("combotree", Ext.ux.ComboBoxTree);

 

 

ComboBoxTree.js

 

 

Ext.ux.ComboBoxTree = function(){

this.treeId = Ext.id()+'-tree';

this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;

this.tpl = new Ext.Template('<tpl for="."><div style="height:'+this.maxHeight+'px"><div id="'+this.treeId+'"></div></div></tpl>');

this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});

this.selectedClass = '';

this.mode = 'local';

this.triggerAction = 'all';

this.onSelect = Ext.emptyFn;

this.editable = false;



//all:所有结点都可选中

//exceptRoot：除根结点，其它结点都可选

//folder:只有目录（非叶子和非根结点）可选

//leaf：只有叶子结点可选

this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';



Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);

}




Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {



expand : function(){

Ext.ux.ComboBoxTree.superclass.expand.call(this);

if(!this.tree.rendered){

this.tree.height = this.maxHeight;

this.tree.border=false;

this.tree.autoScroll=true;

       if(this.tree.xtype){

this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);

}

this.tree.render(this.treeId);

       var combox = this;

       this.tree.on('click',function(node){

        var isRoot = (node == combox.tree.getRootNode());

        var selModel = combox.selectNodeModel;

        var isLeaf = node.isLeaf();

        if(isRoot && selModel != 'all'){

        return;

        }else if(selModel=='folder' && isLeaf){

        return;

        }else if(selModel=='leaf' && !isLeaf){

        return;

        }

        combox.setValue(node);

        combox.collapse();

       });

var root = this.tree.getRootNode();

if(!root.isLoaded())

root.reload();

}

    },

    

setValue : function(node){

        var text = node.text;

        this.lastSelectionText = text;

        if(this.hiddenField){

            this.hiddenField.value = node.id;

        }

        Ext.form.ComboBox.superclass.setValue.call(this, text);

        this.value = node.id;

    },

    

    getValue : function(){

     return typeof this.value != 'undefined' ? this.value : '';

    }

});




Ext.reg('combotree', Ext.ux.ComboBoxTree);

 

 

产生节点的JSP页面getNodes.jsp

 

<%@ page language="java" contentType="text/html; charset=utf-8" %>

<%

String id = request.getParameter("node");

String listNode = "[";

if(id.length()<5){

for(int i=1;i<6;i++){

listNode += "{id:'"+i+"_"+id+"',text:'folder"+i+"_"+id+"'},";

}

listNode = listNode.substring(0,listNode.length()-1) + "]";

}else{

for(int i=1;i<6;i++){

listNode += "{id:'"+i+"_"+id+"',text:'node"+i+"_"+id+"',leaf:true},";

}

listNode = listNode.substring(0,listNode.length()-1) + "]";;

}

out.print(listNode);



%>

 

 

 

第二种方式，是没有经过拓展直接拿来用的，感觉比较容易，就是视觉上多出了一个形如面板的expand的东西，自己也可以去研究下

JSP页面如下

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="base" value="${pageContext.request.contextPath}" />
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Customizing ComboBoxTree</title> 
<link rel="stylesheet" type="text/css" href="${base}/extjs3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${base}/extjs3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/extjs3.1/ext-all.js"></script>
<script type="text/javascript">
var path="${base}/";
</script> 
<script type="text/javascript"> 
Ext.BLANK_IMAGE_URL = path+'extjs3.1/resources/images/default/s.gif';; 
Ext.onReady(function(){ 
var comboxWithTree = new Ext.form.ComboBox({   
       store:new Ext.data.SimpleStore({fields:[],data:[[]]}),   
       editable:false,   
       mode: 'local',   
       triggerAction:'all',   
       maxHeight: 200,   
       tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",   
       selectedClass:'', 
  onSelect:Ext.emptyFn   
   });   
   var tree = new Ext.tree.TreePanel({   
       loader: new Ext.tree.TreeLoader({dataUrl:path+'ComboBoxTree/getNodes.jsp'}),   
       border:false,   
       root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})   
     });   
     tree.on('click',function(node){   
         comboxWithTree.setValue(node.text);   
         comboxWithTree.collapse();   
     });   
     comboxWithTree.on('expand',function(){   
       tree.render("tree");   
     });   
     comboxWithTree.render('comboxWithTree'); 
}); 
</script> 
    <body>
    <div>
    <div id="comboxWithTree">
     </div>
    <div id="tree"></div>
    </div>
</body> 
</html>

 

这两种方式都可以用那个产生子节点的页面

 

评论

1 楼 paddycq 2015-11-11  

你好 请问我如果要在该树选定后控制一个html select标签该如何做？或者说，在树选定节点后，动态增加监听选定事件？