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的下拉树完美了，世界太平了！
  • 相关阅读:
    Azure 虚拟机安全加固整理
    AzureARM 使用 powershell 扩容系统磁盘大小
    Azure Linux 云主机使用Root超级用户登录
    Open edX 配置 O365 SMTP
    powershell 根据错误GUID查寻错误详情
    azure 创建redhat镜像帮助
    Azure Powershell blob中指定的vhd创建虚拟机
    Azure Powershell 获取可用镜像 PublisherName,Offer,Skus,Version
    Power BI 连接到 Azure 账单，自动生成报表，可刷新
    Azure powershell 获取 vmSize 可用列表的命令
  • 原文地址：https://www.cnblogs.com/zhwl/p/3851681.html
Copyright © 2011-2022 走看看