Ext. 用XTemplate实现多列的ComboBox

/**------------------------ *@Copyright (c) 2011 DHC Software Co.,Ltd. ALL RIGHTS RESERVED *@ComponentName dhcc.icare.ComboBox   *@extendFrom Ext.form.ComboBox *@xType icombobox *@forModel MComboBox *@Author  wanghc *@Date 2011-03-28 *@Resume 重写Ext.form.ComboBox *------------------------*/  /**----------------------  *@class   dhcc.icare.ComboBox *@extends Ext.form.ComboBox *@constructor wanghc *@xtype icombobox *@param {Object} config The config object   *@cfg {String} displayFields  *@cfg {boolean} queryInFields *@cfg {String} queryFields *------------------------*/Ext.ns("dhcc","dhcc.icare");dhcc.icare.ComboBox = Ext.extend(Ext.form.ComboBox, {   /***@desc 通过displayFields属性确定生成多列的combobox*通过customData属性生成store*生成queryFields属性值*/initComponent : function(){dhcc.icare.ComboBox.superclass.initComponent(this);},onRender : function(ct,position){dhcc.icare.ComboBox.superclass.onRender.call(this,ct,position);if(this.customData){ // 自动生成storevar cd = this.customData ;this.mode = 'local' ; var cdField = [] ;if(Ext.isArray(cd)){if(Ext.isArray(cd[0])){//[[],[]] 二维数组this.valueField = this.valueField || 'field0' ;for (var i = 0,len = cd[0].length ;i<len; i++){cdField.push('field'+i) ;}this.store = new Ext.data.ArrayStore({ fields: cdField, data: cd});}else if(Ext.isObject(cd[0])){ //[{},{}] json数组 for (var i  in cd[0] ){cdField.push(i) ;}this.store = new Ext.data.JsonStore({ fields: cdField, data: cd});}this.displayField = this.displayField || (cdField.length>1? cdField[1]:cdField[0]) ;}}if((this.queryInFields===true)&&(this.mode=='local')){//默认在全部列中查询if(this.queryFields.length==0){this.store.fields.each(function(f){this.queryFields.push(f.name);},this);}}},initList : function(){if((!this.tpl)&&(this.displayFields)){ // 展示多列var tplString = "" ;var cls = 'x-combo-list'; var cbW = this.width || 150 ;var dfLen = this.displayFields.length ;var w = (cbW/dfLen).toFixed(2) ;var f = this.store.fields ;Ext.each(this.displayFields , function(name){name = f.containsKey(name) ? name : f.keys[name] ;  //列名或列号tplString += '<td width='+w+'>{'+name+'}</td>' ;},this);this.tpl = new Ext.XTemplate('<table><tpl for="."><tr height="20px" >',tplString,'</tr></tpl></table>');}dhcc.icare.ComboBox.superclass.initList.call(this);},/**     * @param {String} query  查询参数的值q       * @param {Boolean} forceAll  如果forceAll为true 显示全部记录,为false时则通过query参数查询     */doQuery : function(q,forceAll){dhcc.icare.ComboBox.superclass.doQuery.call(this,q,forceAll);q = Ext.isEmpty(q) ? '' : q;if(!forceAll && (q.length >= this.minChars)){if((this.queryInFields===true)&&(this.mode=='local')){ var len = this.queryFields.length ;this.selectedIndex = -1;var f = this.store.fields ;this.store.filterBy(function(r,id){for(var i=0 ; i<len ; i++){var name = this.queryFields[i] ;name = f.containsKey(name) ? name : f.keys[name] ;if(RegExp("^"+q).test(r.get(name))){return true;}}return false ; },this);this.onLoad();};}},/***@param String/Json       增加对json的支持*/setValue : function(obj){if(Ext.isString(obj)){dhcc.icare.ComboBox.superclass.setValue.call(this,obj);}else if(Ext.isObject(obj)){this.setValue(obj[this.valueField || this.displayField]);}},/***@param Ext.data.Record 把record作为combobox的选中值 */setRecordValue : function(r){this.setValue(r.data[this.valueField || this.displayField]);this.recordValue = r ;return this;},/***@return Ext.data.Record 拿到combobox当前选中的记录*/getRecordValue : function(){return this.recordValue  ;},/***@desc overwrite*/select : function(index, scrollIntoView){dhcc.icare.ComboBox.superclass.select.call(this,index, scrollIntoView);if(this.selectedIndex == -1) {this.recordValue = '' ;}else{this.recordValue = this.store.getAt(this.selectedIndex) ;}    },/***调用store的load方法*/load : function(options){this.store.load(options) ;},/***调用store的loadData方法*/loadData : function(data,append){this.store.loadData(data,append) ;},/***@desc 显示多列时用到*@property displayFields Array  field的列名或列号(丛0开始)组成的数组 如: [0,name,age,3]*/displayFields : '' ,/***@property queryInFields boolean  *@desc true时 在多字段中查询(doQuery).false则在displayField中查询, 数据是本地时才有效*/queryInFields : false ,/***@property queryFields Array *@desc 多列查询的字段名,在queryInFields为true下，默认在全部列中查询,数据是本地时才有效 如: [0,name,age,3]*/queryFields : [],/***@property recordValue Ext.data.Recode*/recordValue : '' ,/***@property customData Array[Array]/Array[json]*@desc 如果参数是二维数组则自动生成store,store的fields是field0.field1..., data则是二维数组, valueField:'field0', displayField:'field1'||'field0'*/customData : []});Ext.reg('icombobox', dhcc.icare.ComboBox);

以上是重写combobox
下面是用dhcc.icare.ComboBox的例子

var cbArr = [['4',"张麻子",'man'], ['6',"汤师爷",'man'], ['8',"黄四郎",'man'],['12',"夫人",'woman'], ['33',"小六子",'man']] ;var cbJson = [{id:'4',name:'张麻子',sex:'man'},{id:'6',name:'汤师爷',sex:'man'},{id:'12',name:'夫人',sex:'woman'}];var customDataCB = new dhcc.icare.ComboBox({fieldLabel:'自定义数据',minChars:0,width : 245,triggerAction : 'all',customData :  cbArr,  //cbJson ,displayFields : [0,1,2],queryInFields : true,queryFields : [0,1,"field2"]});

下面是效果图