Extjs下拉树代码测试总结

http://blog.csdn.net/kunoy/article/details/8067801

首先主要代码源自网络，对那些无私的奉献者表示感谢！

     笔者对这些代码做了二次修改，并总结如下：

     Extjs3.x版本下拉树代码：

[javascript] view plaincopy
  1. Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {     
  2.     constructor : function(cfg) {     
  3.         cfg = cfg || {};     
  4.         Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({     
  5.             maxHeight : 300,     
  6.             editable : false,  
  7.             mode : 'local',     
  8.             triggerAction : 'all',     
  9.             rootVisible : false,     
  10.             selectMode : 'all'    
  11.         }, cfg));     
  12.     },     
  13.     store : new Ext.data.SimpleStore({     
  14.         fields : [],     
  15.         data : [[]]     
  16.     }),     
  17.     // 重写onViewClick，使展开树结点是不关闭下拉框     
  18.     onViewClick : function(doFocus) {     
  19.         var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);     
  20.         if (r) {     
  21.             this.onSelect(r, index);     
  22.         }     
  23.         if (doFocus !== false) {     
  24.             this.el.focus();     
  25.         }     
  26.     },     
  27.     tree : null,     
  28.     // 隐藏值     
  29.     hiddenValue : null,   
  30.     getHiddenValue : function() {     
  31.         return this.hiddenValue;     
  32.     },  
  33.     getValue : function() {   //增加适用性，与原来combo组件一样  
  34.         return this.hiddenValue;     
  35.     },     
  36.     setHiddenValue : function(code, dispText) {     
  37.         this.setValue(code);     
  38.         Ext.form.ComboBox.superclass.setValue.call(this, dispText);     
  39.         this.hiddenValue = code;     
  40.     },     
  41.     initComponent : function() {     
  42.         var _this = this;     
  43.         var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId     
  44.         this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"    
  45.         this.tree = new Ext.tree.TreePanel({     
  46.             border : false,     
  47.             enableDD : false,     
  48.             enableDrag : false,     
  49.             rootVisible : _this.rootVisible || false,     
  50.             autoScroll : true,     
  51.             trackMouseOver : true,     
  52.             height : _this.maxHeight,     
  53.             lines : true,     
  54.             singleExpand : true,     
  55.             root : new Ext.tree.AsyncTreeNode({     
  56.                 id : _this.rootId,     
  57.                 text : _this.rootText,   
  58.                 iconCls:'ico-root',  
  59.                 expanded:true,  
  60.                 leaf : false,     
  61.                 border : false,     
  62.                 draggable : false,     
  63.                 singleClickExpand : false,     
  64.                 hide : true    
  65.             }),     
  66.             loader : new Ext.tree.TreeLoader({     
  67.                 nodeParameter:'ID',  
  68.                 requestMethod:'GET',  
  69.                 dataUrl : _this.url     
  70.             })     
  71.         });     
  72.         this.tree.on('click', function(node) {     
  73.             if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {     
  74.                 if(_this.fireEvent('beforeselect',_this,node)){  
  75.                     _this.fireEvent('select',_this,node);  
  76.                 }                  
  77.             }     
  78.         });  
  79.         this.on('select',function(obj,node){  
  80.             var dispText = node.text;     
  81.             var code = node.id;  
  82.             obj.setHiddenValue(code, dispText);   
  83.             obj.collapse();    
  84.         });  
  85.         this.on('expand', function() {     
  86.             this.tree.render(tplRandomId);     
  87.         });     
  88.         Ext.ux.TreeCombo.superclass.initComponent.call(this);     
  89.     }     
  90. })     
  91. Ext.reg("treecombo", Ext.ux.TreeCombo);    

使用方法：

[javascript] view plaincopy
  1. var treecombo=new Ext.ux.TreeCombo({    
  2.             name : 'areaName',     
  3.             tplId : 'tree_tpl',     
  4.             rootVisible : true,     
  5.             rootText : '/',  
  6.             rootId:'root',   
  7.             url : 'getTreeData.aspx',                                                                   maxHeight :300,                                                                          
  8.             id: 'cmbJS',                                             
  9.             allowBlank: true,   
  10.             selectMode:'leaf',                                             
  11.             width : '200'              
  12.         });  

Extjs4.x版本下拉树代码一：

[javascript] view plaincopy
  1. Ext.define('Ext.ux.TreeComboBox',{  
  2.     extend : 'Ext.form.field.ComboBox',  
  3.     alias: 'widget.treecombo',  
  4.     store : new Ext.data.ArrayStore({fields:[],data:[[]]}),  
  5.     editable : false,  
  6.     listConfig : {resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400},  
  7.     _idValue : null,  
  8.     _txtValue : null,  
  9.     treeObj: null,  
  10.     initComponent : function(){  
  11.         var _this = this;   
  12.         this.treeObj= new Ext.tree.Panel({  
  13.             border : false,  
  14.             id:Ext.id(),  
  15.             height : 380,  
  16.             width : 400,  
  17.             autoScroll : true,  
  18.             store : Ext.create('Ext.data.TreeStore', {  
  19.                 fields : ['id','text','leaf'],  
  20.                 autoLoad : false,  
  21.                 nodeParam: 'ID',  
  22.                 proxy: {  
  23.                     type: 'ajax',  
  24.                     url : _this.url  
  25.                 },  
  26.                 root: {  
  27.                     expanded: _this.expanded||false,  
  28.                     id:_this.rootId||'root',  
  29.                     text : _this.rootText||'/'  
  30.                 }  
  31.             })  
  32.         });  
  33.         this.treeRenderId = Ext.id();  
  34.         this.tpl = "<div id='"+this.treeRenderId+"'></div>";      
  35.         this.callParent(arguments);  
  36.         this.on({  
  37.             'expand' : function(){  
  38.                 if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){  
  39.                     Ext.defer(function(){  
  40.                         this.treeObj.render(this.treeRenderId);  
  41.                     },300,this);  
  42.                 }  
  43.             }  
  44.         });  
  45.         this.treeObj.on('itemclick',function(view,rec){  
  46.             if(rec&&((_this.selectMode == 'leaf' && rec.isLeaf() == true) || _this.selectMode == 'all')){  
  47.                 this.setValue(this._txtValue = rec.get('text'));  
  48.                 this._idValue = rec.get('id');  
  49.                 this.collapse();  
  50.                 _this.fireEvent('select',_this,rec);  
  51.             }  
  52.         },this);  
  53.     },  
  54.     getValue : function(){//获取id值  
  55.         return this._idValue;  
  56.     },  
  57.     getTextValue : function(){//获取text值  
  58.         return this._txtValue;  
  59.     },  
  60.     setLocalValue : function(id,txt){//设值  
  61.         this._idValue = id;  
  62.         this.setValue(this._txtValue = txt);  
  63.     },  
  64.     reLoad:function(id,url){  
  65.         this.treeObj.getStore().proxy.url =url;  
  66.         this.treeObj.setRootNode({  
  67.             id:id,  
  68.             text:'/',  
  69.             expanded:true  
  70.         });  
  71.     }  
  72. });  

使用方法与前面基本相同。这个版本存在很多问题，当一个界面存在两个下拉树时，其中一个下拉树在第二次下拉操作时，树不会显示，如图：



另外由于tree渲染到div上，当节点过多出现滚动条时，会显示两条滚动条，一条是div本身的，一条是treepanel的，如图：

 所以此版本不采用，其中添加了一个reLoad()方法，这是由于两个下拉树需要联动才添加的。

Extjs4.x版本下拉树代码二：

[javascript] view plaincopy
  1. Ext.define("Ext.ux.ComboTree", {  
  2.     extend : "Ext.form.field.Picker",  
  3.     alias : 'widget.combotree',  
  4.     requires : ["Ext.tree.Panel"],  
  5.     _idValue : '',  
  6.     _txtValue : '',  
  7.     initComponent : function() {  
  8.       this.callParent();  
  9.       var self = this;  
  10.       var store = Ext.create('Ext.data.TreeStore', {  
  11.           proxy : {  
  12.                 type : 'ajax',  
  13.                 url : self.storeUrl  
  14.            },  
  15.            nodeParam: 'ID',  
  16.            root : {  
  17.                id : self.rootId,  
  18.                text : self.rootText,  
  19.                expanded:self.expanded||false  
  20.            }  
  21.       });  
  22.       self.picker = new Ext.tree.Panel({  
  23.              id:Ext.id(),              
  24.              height : self.treeHeight||300,  
  25.              resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:500,  
  26.              autoScroll : true,  
  27.              floating : true,  
  28.              focusOnToFront : false,  
  29.              shadow : true,  
  30.              ownerCt : this.ownerCt,  
  31.              useArrows : self.useArrows||true,  
  32.              store : store,  
  33.              rootVisible : true  
  34.       });  
  35.       self.picker.on({  
  36.          'itemclick' : function(view,rec) {  
  37.              if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){  
  38.                   //self.setRawValue(rec.get('id'));// 隐藏值  
  39.                   self._idValue = rec.get('id');  
  40.                   self.setValue(self._txtValue=rec.get('text'));// 显示值  
  41.                   self.collapse();  
  42.                   self.fireEvent('select',self,rec);  
  43.              }  
  44.          }  
  45.       });  
  46.     },  
  47. //  createPicker : function() {  
  48. //    var self = this;  
  49. //    var store = Ext.create('Ext.data.TreeStore', {  
  50. //        proxy : {  
  51. //              type : 'ajax',  
  52. //              url : self.storeUrl  
  53. //         },  
  54. //         nodeParam: 'ID',  
  55. //         root : {  
  56. //             id : self.rootId,  
  57. //             text : self.rootText,  
  58. //             expanded:self.expanded||true  
  59. //         }  
  60. //    });  
  61. //    self.picker = new Ext.tree.Panel({  
  62. //           id:Ext.id(),              
  63. //           height : 300,  
  64. //           //resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400,  
  65. //           autoScroll : true,  
  66. //           floating : true,  
  67. //           focusOnToFront : false,  
  68. //           shadow : true,  
  69. //           ownerCt : this.ownerCt,  
  70. //           useArrows : self.useArrows||true,  
  71. //           store : store,  
  72. //           rootVisible : true  
  73. //    });  
  74. //    self.picker.on({  
  75. //       'itemclick' : function(view,rec) {  
  76. //           if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){  
  77. //                //self.setRawValue(rec.get('id'));// 隐藏值  
  78. //                self._idValue = rec.get('id');  
  79. //                self.setValue(self._txtValue=rec.get('text'));// 显示值  
  80. //                self.collapse();  
  81. //                self.fireEvent('select',self,rec);  
  82. //           }  
  83. //       }  
  84. //    });  
  85. //    return self.picker;  
  86. //  },  
  87.     getValue : function(){//获取id值  
  88.         return this._idValue;  
  89.     },  
  90.     getTextValue : function(){//获取text值  
  91.         return this._txtValue;  
  92.     },  
  93.     reLoad:function(id,url){  
  94.         var store=this.picker.getStore();  
  95.         var root=this.picker.getRootNode();  
  96.         store.proxy.url =url;  
  97.         root.set('id',id);  
  98.         store.load();  
  99.     },  
  100.     alignPicker : function() {  
  101.       var me = this, picker, isAbove, aboveSfx = '-above';  
  102.       if (this.isExpanded) {  
  103.            picker = me.getPicker();  
  104.            if (me.matchFieldWidth) {  
  105.               picker.setWidth(me.bodyEl.getWidth());  
  106.            }  
  107.            if (picker.isFloating()) {  
  108.                picker.alignTo(me.inputEl, "", me.pickerOffset);  
  109.                isAbove = picker.el.getY() < me.inputEl.getY();  
  110.                me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls+ aboveSfx);  
  111.                picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls+ aboveSfx);  
  112.            }  
  113.       }  
  114.     }  
  115. });  

       此版本解决了上述两大问题，其中注解的部分为原作者代码，使用createPicker存在一个问题，必须点击下拉操作后，treepanel才会进行渲染，那么数据联动也就谈不上了（需要联动的tree没有渲染，如何进行数据加载?)，所以笔者移到initComponent下执行，另外也解决了resize的问题。
       使用方法：

[javascript] view plaincopy
  1. var treecombo=new Ext.ux.ComboTree({   
  2.             fieldLabel: 'Test',  
  3.             labelWidth: 60,     
  4.             rootText : '/',  
  5.             rootId:'root',   
  6.             expanded:true,  
  7.             storeUrl : 'getTreeData.aspx',                                                                                                                                                                                            
  8.             id: 'cmbJS',                                             
  9.             selectMode:'leaf',  
  10.             treeHeight:300,             
  11.             width : 200              
  12.         });  

       到此，Extjs4.1的下拉树完美了，世界太平了！

posted @ 2014-07-17 17:56  郑文亮  阅读(1267)  评论(0)  编辑  收藏  举报