Ext TreeCombo 树形 下拉框,树形下拉框,EXT树形

1.添加hiddenName，使传值时跟Ext.form.ComboBox类似;

2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;

 

代码如下:

 /**
  * @version Base on Ext3.0
  * @class Ext.ux.TreeCombo
  * @extends Ext.form.TriggerField
  */

 Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {

     // triggerClass: 'x-form-tree-trigger',

     initComponent : function() {
         this.readOnly = true;
         Ext.ux.TreeCombo.superclass.initComponent.call(this);
         this.on('specialkey', function(f, e) {
                     if (e.getKey() == e.ENTER) {
                         this.onTriggerClick();
                     }
                 }, this);
         this.getTree();
     },

     onTriggerClick : function() {
         this.getTree().show();
         this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
     },

     getTree : function() {
         if (!this.treePanel) {
             if (!this.treeWidth) {
                 this.treeWidth = Math.max(150, this.width || 200);
             }
             if (!this.treeHeight) {
                 this.treeHeight = 200;
             }
             this.treePanel = new Ext.tree.TreePanel({
                 renderTo : Ext.getBody(),
                 loader : this.loader || new Ext.tree.TreeLoader({
                             preloadChildren : (typeof this.root == 'undefined'),
                             url : this.dataUrl || this.url
                         }),
                 root : this.root || new Ext.tree.AsyncTreeNode({
                             children : this.children
                         }),
                 rootVisible : (typeof this.rootVisible != 'undefined')
                         ? this.rootVisible
                         : (this.root ? true : false),
                 floating : true,
                 autoScroll : true,
                 minWidth : 200,
                 minHeight : 200,
                 width : this.treeWidth,
                 height : this.treeHeight,
                 listeners : {
                     hide : this.onTreeHide,
                     show : this.onTreeShow,
                     click : this.onTreeNodeClick,
                     expandnode : this.onExpandOrCollapseNode,
                     collapsenode : this.onExpandOrCollapseNode,
                     resize : this.onTreeResize,
                     scope : this
                 }
             });
             this.treePanel.show();
             this.treePanel.hide();
             this.relayEvents(this.treePanel.loader, ['beforeload', 'load',
                             'loadexception']);
             if (this.resizable) {
                 this.resizer = new Ext.Resizable(this.treePanel.getEl(), {
                             pinned : true,
                             handles : 'se'
                         });
                 this.mon(this.resizer, 'resize', function(r, w, h) {
                             this.treePanel.setSize(w, h);
                         }, this);
             }
         }
         return this.treePanel;
     },

     onExpandOrCollapseNode : function() {
         if (!this.maxHeight || this.resizable)
             return; // -----------------------------> RETURN
         var treeEl = this.treePanel.getTreeEl();
         var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
         var ulEl = treeEl.child('ul'); // Get the underlying tree element
         var heightRequired = ulEl.getHeight() + heightPadding;
         if (heightRequired > this.maxHeight)
             heightRequired = this.maxHeight;
         this.treePanel.setHeight(heightRequired);
     },

     onTreeResize : function() {
         if (this.treePanel)
             this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
     },

     onTreeShow : function() {
         Ext.getDoc().on('mousewheel', this.collapseIf, this);
         Ext.getDoc().on('mousedown', this.collapseIf, this);
     },

     onTreeHide : function() {
         Ext.getDoc().un('mousewheel', this.collapseIf, this);
         Ext.getDoc().un('mousedown', this.collapseIf, this);
     },

     collapseIf : function(e) {
         if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {
             this.collapse();
         }
     },

     collapse : function() {
         this.getTree().hide();
         if (this.resizer)
             this.resizer.resizeTo(this.treeWidth, this.treeHeight);
     },

     // private
     validateBlur : function() {
         return !this.treePanel || !this.treePanel.isVisible();
     },

     setValue : function(v) {
         this.startValue = this.value = v;
         if (this.treePanel) {
             var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用
             if (n) {
                 n.select();//默认选中节点
                 this.setRawValue(n.text);
                 if (this.hiddenField)
                     this.hiddenField.value = v;
             }
         }
     },

     getValue : function() {
         return this.value;
     },

     onTreeNodeClick : function(node, e) {
         this.setRawValue(node.text);
         this.value = node.id;
         if (this.hiddenField)
             this.hiddenField.value = node.id;
         this.fireEvent('select', this, node);
         this.collapse();
     },
     onRender : function(ct, position) {
         Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);
         if (this.hiddenName) {
             this.hiddenField = this.el.insertSibling({
                         tag : 'input',
                         type : 'hidden',
                         name : this.hiddenName,
                         id : (this.hiddenId || this.hiddenName)
                     }, 'before', true);

             // prevent input submission
             this.el.dom.removeAttribute('name');
         }
     }
 });

 

示例:

1:选择页面，在定义了根节点的情况下逐级加载

 

 var businessId = new Ext.ux.TreeCombo({
             fieldLabel : '业务名称',
             width : 120,
             allowBlank : false,
             //name : 'param.businessId',
             hiddenName : 'param.businessId',
             rootVisible : true,
             root : new Ext.tree.AsyncTreeNode({
                         text : '业务列表',
                         expanded : true,
                         levelNum : 0,
                         id : '100000'
                     }),
             dataUrl : 'getChild_business.do?param.superId=100000'
         });

 businessId.treePanel.on('beforeload', function(node) {
     businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='
             + node.id;});

 后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]

    

 2.显示并修改(expandAll后再setValue)

 var businessId = new Ext.ux.TreeCombo({
             fieldLabel : '业务名称',
             width : 120,
             allowBlank : false,
             hiddenName : 'param.businessId',
             rootVisible : false,
             dataUrl : 'getAllJson_business.do'
         });

 businessId.treePanel.on('load', function() {
             businessId.setValue('<s:property value="#param.businessId" />');
         });
 businessId.treePanel.expandAll();

 

 后台请求返回的json如:
 [{
             "id" : 100000,
             "text" : "业务列表",
             "leaf" : false,
             "superId" : 0,
             "children" : [{

                         "id" : 200024,
                         "text" : "业务23",
                         "leaf" : false,
                         "superId" : 100000,
                         "children" : [...略]
                     }, {

                         "id" : 200043,
                         "text" : "业务2",
                         "leaf" : false,
                         "superId" : 100000,
                         "children" : [...略]
                     }]
         }]

 

 
3.只读(直接用Ext.form.ComboBox)

 后台数据返回对应项即可
 [{"value":"200043","display":"业务2"}]

 

 

 

 

----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------

 

 var childrenArrData =
             [{  id:'-1',
               text:'根节点',
               value:'-1',
               leaf:false,
               children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]
              }];


 var treeCombo = new Ext.ux.TreeCombo({
     fieldLabel : 'xx',
     width : 300,
     name : 'treeCombo',
     hiddenName : 'treeCombo',
     rootVisible : false,
     root:new Ext.tree.AsyncTreeNode({
        id:"-1",
        text:"根节点",
        expanded:true,
        leaf:false,
        children: childrenArrData
     })
 });

 treeCombo.treePanel.on('click',function(node){
     alert(node.attributes.value);//取节点属性
 });

 //先展开，再设值。这样才会显示text值，不然会显示value去
 function setTaskSerial(val){
     treeCombo.treePanel.expandAll();
     treeCombo.setValue(val);
 }

 function gettreeCombo(){
     return treeCombo.getValue();
 }

   ----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------

 onTriggerClick : function() {
     if(!this.disabled){//modify 20121204
         this.getTree().show();
         this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
     }
 },

    在原来的基础上加个判断，这样treeCombo.disable();后点击下拉箭头就能不让下拉了。

此文章为转载,仅供技术参考

下面是源码下载(完整项目+代码):
TreeCombo 点击下载即可运行..