zoukankan      html  css  js  c++  java

  • 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的下拉树完美了，世界太平了！
  • 相关阅读:
    drf中的请求模块和渲染模块
    drf基础
    vue中的路由传参及跨组件传参
    vue项目环境搭建与组件介绍
    vue基础指令了解补充及组件介绍
    整理的几个防止刷新后退重复提交数据的方法
    程序员心灵之塔
    怎么样才是好的程序员
    using在namespace里面还是外面有区别吗
    高级.net工程师必备
  • 原文地址：https://www.cnblogs.com/zhwl/p/3851681.html
Copyright © 2011-2022 走看看