Ext之扩展Ext.ux.form.LovCombo使用

拓梦人

    最近学习使用Ext做些东西，有时候找到现成的，但却不知道如何使用。比如前几天在项目中有个多选下拉框的要求。由于Ext本身并没有这样的控件，经过在网上搜索，找到一个扩展了Ext.form.ComboBox的控件Ext.ux.form.LovCombo 其可以满足多选。虽然找到了，但不知道怎么用，经过一天多的努力，终于会用了。首先看看其源码。
 
Ext.ux.form.LovCombo源码如下
// add RegExp.escape if it has not been already addedif('function' !== typeof RegExp.escape) {RegExp.escape = function(s) {if('string' !== typeof s) {return s;}// Note: if pasting from forum, precede ]/\ with backslash manuallyreturn s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');}; // eo function escape}// create namespaceExt.ns('Ext.ux.form');/** * * @class Ext.ux.form.LovCombo * @extends Ext.form.ComboBox */Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {// {{{    // configuration options/** * @cfg {String} checkField name of field used to store checked state. * It is automatically added to existing fields. * Change it only if it collides with your normal field. */ checkField:'checked'/** * @cfg {String} separator separator to use between values and texts */    ,separator:','/** * @cfg {String/Array} tpl Template for items.  * Change it only if you know what you are doing. */// }}}    // {{{    ,initComponent:function() {        // template with checkboxif(!this.tpl) {this.tpl =  '<tpl for=".">'+'<div class="x-combo-list-item">'+'<img src="' + Ext.BLANK_IMAGE_URL + '" '+'class="ux-lovcombo-icon ux-lovcombo-icon-'+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'+'</div>'+'</tpl>';}         // call parent        Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);// install internal event handlersthis.on({ scope:this,beforequery:this.onBeforeQuery,blur:this.onRealBlur});// remove selection from input fieldthis.onLoad = this.onLoad.createSequence(function() {if(this.el) {var v = this.el.dom.value;this.el.dom.value = '';this.el.dom.value = v;}});     } // e/o function initComponent    // }}}// {{{/** * Disables default tab key bahavior * @private */,initEvents:function() {Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);// disable default tab handling - does no goodthis.keyNav.tab = false;} // eo function initEvents// }}}// {{{/** * clears value */,clearValue:function() {this.value = '';this.setRawValue(this.value);this.store.clearFilter();this.store.each(function(r) {r.set(this.checkField, false);}, this);if(this.hiddenField) {this.hiddenField.value = '';}this.applyEmptyText();} // eo function clearValue// }}}// {{{/** * @return {String} separator (plus space) separated list of selected displayFields * @private */,getCheckedDisplay:function() {var re = new RegExp(this.separator, "g");return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');} // eo function getCheckedDisplay// }}}// {{{/** * @return {String} separator separated list of selected valueFields * @private */,getCheckedValue:function(field) {field = field || this.valueField;var c = [];// store may be filtered so get all recordsvar snapshot = this.store.snapshot || this.store.data;snapshot.each(function(r) {if(r.get(this.checkField)) {c.push(r.get(field));}}, this);return c.join(this.separator);} // eo function getCheckedValue// }}}// {{{/** * beforequery event handler - handles multiple selections * @param {Object} qe query event * @private */,onBeforeQuery:function(qe) {qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');} // eo function onBeforeQuery// }}}// {{{/** * blur event handler - runs only when real blur event is fired */,onRealBlur:function() {this.list.hide();var rv = this.getRawValue();var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));var va = [];var snapshot = this.store.snapshot || this.store.data;// iterate through raw values and records and check/uncheck itemsExt.each(rva, function(v) {snapshot.each(function(r) {if(v === r.get(this.displayField)) {va.push(r.get(this.valueField));}}, this);}, this);this.setValue(va.join(this.separator));this.store.clearFilter();} // eo function onRealBlur// }}}// {{{/** * Combo's onSelect override * @private * @param {Ext.data.Record} record record that has been selected in the list * @param {Number} index index of selected (clicked) record */,onSelect:function(record, index) {        if(this.fireEvent('beforeselect', this, record, index) !== false){// toggle checked fieldrecord.set(this.checkField, !record.get(this.checkField));// display full listif(this.store.isFiltered()) {this.doQuery(this.allQuery);}            // set (update) value and fire eventthis.setValue(this.getCheckedValue());            this.fireEvent('select', this, record, index);        }} // eo function onSelect// }}}// {{{/** * Sets the value of the LovCombo * @param {Mixed} v value */,setValue:function(v) {if(v) {v = '' + v;if(this.valueField) {this.store.clearFilter();this.store.each(function(r) {var checked = !(!v.match( '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)'));r.set(this.checkField, checked);}, this);this.value = this.getCheckedValue();this.setRawValue(this.getCheckedDisplay());if(this.hiddenField) {this.hiddenField.value = this.value;}}else {this.value = v;this.setRawValue(v);if(this.hiddenField) {this.hiddenField.value = v;}}if(this.el) {this.el.removeClass(this.emptyClass);}}else {this.clearValue();}} // eo function setValue// }}}// {{{/** * Selects all items */,selectAll:function() {        this.store.each(function(record){            // toggle checked field            record.set(this.checkField, true);        }, this);        //display full list        this.doQuery(this.allQuery);        this.setValue(this.getCheckedValue());    } // eo full selectAll// }}}// {{{/** * Deselects all items. Synonym for clearValue */    ,deselectAll:function() {this.clearValue();    } // eo full deselectAll // }}}}); // eo extend// register xtypeExt.reg('lovcombo', Ext.ux.form.LovCombo);  // eof 
  CSS代码如下：
/**  * * Ext.ux.form.LovCombo CSS File * * @author    Ing.Jozef  * @copyright (c) 2008. * @date      5. April 2008 * @version   $Id: lovCombo.css,v 1.1.2.1 2009/11/30 02:12:32 xiaozhangqi Exp $ * * @license Ext.ux.form.LovCombo.css is licensed under the terms of the Open Source * LGPL 3.0 license. Commercial use is permitted to the extent that the  * code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. *  * License details: http://www.gnu.org/licenses/lgpl.html */.ux-lovcombo-icon {width:16px;height:16px;float:left;background-position: -1px -1px ! important;background-repeat:no-repeat ! important;}.ux-lovcombo-icon-checked {background: transparent url(../ext-plug/resources/images/default/menu/checked.gif);}.ux-lovcombo-icon-unchecked {background: transparent url(../ext-plug/resources/images/default/menu/unchecked.gif);} /* eof */ 
 
下面介绍如何使用Ext.ux.form.LovCombo（在这里介绍的是基于JSP,服务器端使用Java）
 
      首先，当然时在你的JSP中引入Ext.ux.form.LovCombo源代码和其CSS文件了，如：
<script type="text/javascript" src="<c:url value="/wrapper/LovCombo.js"/>"></script><link rel="stylesheet" type="text/css" href="<c:url value="/css/lovCombo.css"/>"/>     
     然后，当然是在你的JS中创建一个Ext.ux.form.LovCombo了，在我的代码中的使用方式是在一个JS类中创建一个方 法来专门得到一个Ext.ux.form.LovCombo得实例，当然对于其它控件的获取你也可以这样，其中方法如下：
this.getMultiSelectComboBox = function(title, url, width, name, editable,blank, handler) {title2 = stringFilter['filterBlank'](blank, title);var store = new Ext.data.JsonStore({url : url,fields : ['label', 'value', 'selected']});store.load();Ext.namespace("Ext.ux.form");store.on('load', function(ds, records, o) { var isFirst = true;             var selectedItems = "";for (i = 0; i < records.length; i++) {if (records.data.selected == 'y') {if(isFirst){selectedItems = selectedItems+records.data.value;isFirst =false;}else{selectedItems=selectedItems+","+records.data.value;}}}multiSelectComboBox.setValue(selectedItems);});var multiSelectComboBox = new Ext.ux.form.LovCombo({//id : 'lovcombo',name : name,hiddenName : name,fieldLabel : title2,width : width,listWidth : width,hideOnSelect : false,maxHeight : 200,readOnly : true,editable : false,store : store,displayField : 'label',valueField : 'value',typeAhead : true,allowBlank : blank,triggerAction : 'all',emptyText : "-=请选择=-",mode : 'local'});return multiSelectComboBox;};          上面代码的URL就是Ajax访问的URL,如“flowInfoConfigAction.do?method=getRoles”(我使用的服务器端 是Struts),
 
  再次是服务器传回的数据格式如下：
[{"value":"1","label":"rootDepart"},{"selected":"y","value":"2","label":"Depart_1"},{"selected":"y","value":"3","label":"Depart_2"}]   至于如何根据你的实体得到这样的Json数据，这里就不用多说了！
 
   最后的使用效果如下图：
  
 
 特别注意：这个组件，在失去焦点后会出现选中的值被清空，要处理这个问题有以下两种方法:
// 第一种方法 override beforeBlur method   Ext.override(Ext.ux.form.LovCombo, {          beforeBlur: Ext.emptyFn      });   /*****************************************/lovCombo = new Ext.ux.form.LovCombo({    fieldLabel : '多选框',    id : 'test',    name : 'test',    store : fromStore,    mode : 'local',    readOnly : true,    triggerAction : 'all',    allowBlank : true,    valueField : "id",    displayField : "name",    anchor : '90%',    beforeBlur : function() {// 第二种方法直接配在定义处. override beforeBlur method}});    这种解决办法来自http://blog.csdn.net/avajworm/article/details/6304684#