??? 最近学习使用Ext做些东西，有时候找到现成的，但却不知道如何使用。比如前几天在项目中有个多选下拉框的要求。由于Ext本身并没有这样的控件，经过在网上搜索，找到一个扩展了Ext.form.ComboBox的控件Ext.ux.form.LovCombo 其可以满足多选。虽然找到了，但不知道怎么用，经过一天多的努力，终于会用了。首先看看其源码。
?
Ext.ux.form.LovCombo源码如下
Java代码
// add RegExp.escape if it has not been already added?
if(‘function’ !== typeof RegExp.escape) {?
??? RegExp.escape = function(s) {?
??????? if(‘string’ !== typeof s) {?
??????????? return s;?
??????? }?
??????? // Note: if pasting from forum, precede ]/ with backslash manually?
??????? return s.replace(/([.*+?^=!:${}()|[]/\])/g, ‘\$1’);?
??? }; // eo function escape?
}?
?
// create namespace?
Ext.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 checkbox?
??????? if(!this.tpl) {?
??????????? this.tpl =??
???????????????? ‘<tpl for=”.”>’?
??????????????? +'<div>’?
??????????????? +'<img src=”‘ + Ext.BLANK_IMAGE_URL + ‘” ‘?
??????????????? +’class=”ux-lovcombo-icon ux-lovcombo-icon-‘?
??????????????? +'{[values.’ + this.checkField + ‘?”checked”:”unchecked”‘ + ‘]}”>’?
??????????????? +'<div>{‘ + (this.displayField || ‘text’ )+ ‘}</div>’?
??????????????? +'</div>’?
??????????????? +'</tpl>’?
??????????? ;?
??????? }?
??
??????? // call parent?
??????? Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);?
?
??????? // install internal event handlers?
??????? this.on({?
???????????? scope:this?
??????????? ,beforequery:this.onBeforeQuery?
??????????? ,blur:this.onRealBlur?
??????? });?
?
??????? // remove selection from input field?
??????? this.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 good?
??????? this.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 records?
??????? var 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 items?
??????? Ext.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 field?
??????????? record.set(this.checkField, !record.get(this.checkField));?
?
??????????? // display full list?
??????????? if(this.store.isFiltered()) {?
??????????????? this.doQuery(this.allQuery);?
??????????? }?
?????????????
??????????? // set (update) value and fire event?
??????????? this.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 xtype?
Ext.reg(‘lovcombo’, Ext.ux.form.LovCombo);??
??
// eof?
?
? CSS代码如下：
Java代码
/**?
?*
?* 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: <a href=”http://www.gnu.org/licenses/lgpl.html”>http://www.gnu.org/licenses/lgpl.html</a>
?*/?
?
.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文件了，如：
Java代码
<script type=”text/javascript” src=”<c:url value=”/wrapper/LovCombo.js”/>”></script>?
lt;link rel=”stylesheet” type=”text/css” href=”<c:url value=”/css/lovCombo.css”/>”/>?
????
???? 然后，当然是在你的JS中创建一个Ext.ux.form.LovCombo了，在我的代码中的使用方式是在一个JS类中创建一个方 法来专门得到一个Ext.ux.form.LovCombo得实例，当然对于其它控件的获取你也可以这样，其中方法如下：
Java代码
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[i].data.selected == ‘y’) {?
??????????????? if(isFirst){?
??????????????? selectedItems = selectedItems+records[i].data.value;?
??????????????? isFirst =false;?
??????????????? }else{?
??????????????????? selectedItems=selectedItems+”,”+records[i].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),
?
? 再次是服务器传回的数据格式如下：
Java代码
[{“value”:”1″,”label”:”rootDepart”},{“selected”:”y”,”value”:”2″,”label”:”Depart_1″},{“selected”:”y”,”value”:”3″,”label”:”Depart_2″}]?
?? 至于如何根据你的实体得到这样的Json数据，这里就不用多说了！
ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug
关键字: extjs3.0 lovcombo bug 下拉多选框
如果你不知道lovcombo是什么,看<a href=”http://setting.javaeye.com/blog/340900″>http://setting.javaeye.com/blog/340900</a>
?
?
?
在3.0里面有个BUG,就是选中后,焦点离开的时候,combo的RawValue就没了…
?
于是分析了下,定位到以下代码:
Js代码
//Ext.form.ComboBox源码?
??? // private?
??? beforeBlur : function(){?
??????? var val = this.getRawValue();?
??????? if(this.forceSelection){?
??????????? if(val.length > 0 && val != this.emptyText){?
?????????????? this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : ”;?
??????????????? this.applyEmptyText();?
??????????? }else{?
??????????????? this.clearValue();?
??????????? }?
??????? }else{?
?????????? //关键问题所在?
??????????? var rec = this.findRecord(this.displayField, val);?
??????????? if(rec){?
??????????????? val = rec.get(this.valueField || this.displayField);?
??????????? }?
??????????? this.setValue(val);?
?
?
??????? }?
??? },?
?
?
1.先来说说LovCombo的原理,
? 1)其实它就是在store里面加一个field,用来标记是否选中.(配置项 checkField:’checked’)
? 2)value和rawValue都是通过逗号分隔的值(配置项 separator:’,’)
?
2.所以我们看上面的var rec=this.findRecor(this.displayField,val);肯定是得不到, rec为null,这时候value就被设置为val,也就是rawValue,但是如下代码,它的setValue判断的是value,所以自然为null
Js代码
//Ext.ux.form.LovCombo.js?
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();?
??????? }?
??? }?
?
3.修复的办法很简单,
1)重写beforeBlur
Js代码
var combo = new Ext.ux.form.LovCombo({?
? width:600,?
? hideOnSelect:false,?
? maxHeight:200,?
? store:new Ext.data.SimpleStore({?
??? id:0,?
??? fields:[‘pid’, ‘imageName’]?
? }),?
? triggerAction:’all’,?
? valueField:’pid’,?
? displayField:’imageName’,?
? mode:’local’,?
? <strong>beforeBlur:function(){}</strong>?
?
?
?
?
});?
?
2)重写findRecord返回多个record,然后在顶上那段粗体部分的代码,遍历record,拼成value,再set进去.
–这个就自己写吧,也不复杂~
?
?
查看图片附件
一份感人的美国”911″接警记录 | 续:ExtJS Chart 扩展(重构了下,并写了个 …
16:16浏览 (3092)评论 (4)分类: ExtJS发布在 EXT 圈子 相关推荐
评论
4 楼 sssgon 4 小时前?? 引用
问下LZ，如果我想设置默认值该怎么设置呢？就是说一点击下拉的时候已经有默认选中的存在了
3 楼 yangzelai 2010-06-03?? 引用
呃,错了,应该是:当选择一个下拉项后,lovCombo就把一切设置好了.所以在beforeBlur时,不必做任何值的检查.即写个空的就行了,当然如果不写一个function来覆盖它的话,默认就会继承这个function来执行了.
2 楼 yangzelai 2010-06-03?? 引用
把这个方法重写一个空的就行了.就是方法体内不写任何东西.
想写也可以,不过我认为没有必要,因为lovcombo的setValue方法里面又自动找了一道.
1 楼 fireinjava 2010-03-19?? 引用
天猪强啊按你的意思写的，顺便粘你这呵呵，改了beforeBlur
Java代码
String.prototype.trim = function() {???????????????
? return this.replace(/^s+|s+$/g, ”);?????????
}?
Java代码
?beforeBlur : function(){?
??? var val = this.getRawValue();?
??? if(this.forceSelection){?
??????? if(val.length > 0 && val != this.emptyText){?
?????????? this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : ”;?
??????????? this.applyEmptyText();?
??????? }else{?
??????????? this.clearValue();?
??????? }?
??? }else{?
??????????? var texts = val.split(‘,’);?
??????????? var values=”;?
??????????? for(var i=0;i<texts.length;i++){?
??????????????????? var rec = this.findRecord(this.displayField, texts[i].trim());?
???????????????? if(rec){?
??????????????????????? values+=(values.length>0?’,’:”)+rec.data[this.valueField];?
??????????????????? }?
??????????????? }?
??????? this.setValue(values);?
??? }?
}?
前言：由于extjs3.0的combo源码改变，导致lovcombo无法正常工作，故而需要修正。
????????? 以下代码来源于互联网
lovcombo源码：lovcombo.js
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.form.LovCombo, List of Values Combo
*
* @author??? Ing. Jozef Sakálo?
* @copyright (c) 2008, by Ing. Jozef Sakálo?
* @date????? 16. April 2008
* @version?? $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
*
* @license Ext.ux.form.LovCombo.js 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: <a href=”http://www.gnu.org/licenses/lgpl.html”>http://www.gnu.org/licenses/lgpl.html</a>
*/
/*global Ext */
// add RegExp.escape if it has not been already added
if(‘function’ !== typeof RegExp.escape) {
??? RegExp.escape = function(s) {
??????? if(‘string’ !== typeof s) {
??????????? return s;
??????? }
??????? // Note: if pasting from forum, precede ]/ with backslash manually
??????? return s.replace(/([.*+?^=!:${}()|[]/\])/g, ‘\$1’);
??? }; // eo function escape
}
// create namespace
Ext.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} selectAllOn the value of the option used as
???? * the select-all / deselect-all trigger
???? */
??? selectAllOn: null,
??? /**
???? * @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 for getValue and submission
???? */
??? ,separator:’,’
??? /**
???? * @cfg {String} displaySeparator displaySeparator to use between values and texts for display
???? */
??? ,displaySeparator:’,’
??? /**
???? * @cfg {String/Array} tpl Template for items.
???? * Change it only if you know what you are doing.
???? */
??? // }}}
??? // {{{
??? ,initComponent:function() {
???????
??????? // template with checkbox
??????? if(!this.tpl) {
??????????? this.tpl =
???????????????? ‘<tpl for=”.”>’
??????????????? +'<div>’
??????????????? +'<img src=”‘ + Ext.BLANK_IMAGE_URL + ‘” ‘
??????????????? +’class=”ux-lovcombo-icon ux-lovcombo-icon-‘
??????????????? //+'{[values.’ + this.checkField + ‘?”checked”:values.’ + this.checkField + ‘===null?”mixed”:”unchecked”‘ + ‘]}”>’
??????????????? +'{[values.’ + this.checkField + ‘?”checked”:”unchecked”‘ + ‘]}”>’
??????????????? +'<div>{‘ + (this.displayField || ‘text’ )+ ‘}</div>’
??????????????? +'</div>’
??????????????? +'</tpl>’
??????????? ;
??????? }
??????? // call parent
??????? Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);
??????? // install internal event handlers
??????? this.on({
???????????? scope:this
??????????? ,beforequery:this.onBeforeQuery
??????????? //,blur:this.onRealBlur
??????? });
??????? // remove selection from input field
??????? this.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 good
??????? this.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(RegExp.escape(this.separator), “g”);
??????? return this.getCheckedValue(this.displayField).replace(re, RegExp.escape(this.displaySeparator) + ‘ ‘);
??? } // 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 records
??????? var snapshot = this.store.snapshot || this.store.data;
??????? snapshot.each(function(r) {
??????????? if (r.get(this.checkField) && r.data[this.valueField] !== this.selectAllOn)
??????????????? c.push(r.get(field));
??????? }, this);
??????? return c.join(this.separator);
??? } // eo function getCheckedValue
??? ,selectAllCheck:function() {
??????? var snapshot = this.store.snapshot || this.store.data;
??????? var selectAll = true;
??????? snapshot.each(function(r) {
??????????? if (r.data[this.valueField] !== this.selectAllOn && !r.get(this.checkField)) {
??????????????? selectAll = false;
??????????????? return;
??????????? }
??????? }, this);
???????
??????? return selectAll;
??? }
??? // }}}
??? // {{{
??? /**
???? * beforequery event handler – handles multiple selections
???? * @param {Object} qe query event
???? * @private
???? */
??? ,onBeforeQuery:function(qe) {
??????? qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + ‘[ ‘ + RegExp.escape(this.separator) + ‘]*’), ”);
??? } // eo function onBeforeQuery
??? // }}}
??? // {{{
??? /**
???? * blur event handler – runs only when real blur event is fired
???? */
??? ,beforeBlur:function() {
??????? this.list.hide();
??????? var rv = this.getRawValue();
??????? var rva = rv.split(new RegExp(RegExp.escape(this.displaySeparator) + ‘ *’));
??????? var va = [];
??????? var snapshot = this.store.snapshot || this.store.data;
??????? // iterate through raw values and records and check/uncheck items
??????? Ext.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 field
??????????? record.set(this.checkField, !record.get(this.checkField));
??????????? // display full list
??????????? if(this.store.isFiltered()) {
??????????????? this.doQuery(this.allQuery);
??????????? }
??????????? // set (update) value and fire event
??????????? if(record.data[this.valueField] === this.selectAllOn){
??????????????? if(record.get(this.checkField)){
??????????????????? this.selectAll();
??????????????? }else{
??????????????????? this.deselectAll();
??????????????? }???????????????
??????????? }else{
??????????????? this.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) {
??????????????????? if (r.data[this.valueField] === this.selectAllOn && this.selectAllCheck())
??????????????????????? r.set(this.checkField, true);
??????????????????? else if (r.data[this.valueField] === this.selectAllOn)
??????????????????????? r.set(this.checkField, null);
??????????????????? else {
??????????????????????? var checked = !(!v.match(
???????????????????????????? ‘(^|’ + RegExp.escape(this.separator) + ‘)’ + RegExp.escape(r.get(this.valueField))
??????????????????????????? +'(‘ + RegExp.escape(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 xtype
Ext.reg(‘lovcombo’, Ext.ux.form.LovCombo);
样式表：（如果没有这个样式表，则不会显示下拉列表的复选框） lovcombo.css
..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(../../../extjs/resources/images/slate/menu/checked.gif);??
}??
.ux-lovcombo-icon-unchecked {??
??? background: transparent url(../../../extjs/resources/images/slate/menu/unchecked.gif);??
}
//注意：gif图片的路径问题，这两个gif文件包含在extjs的adapter目录中，引用的时候，注意修改路径
使用方法：
1、调用lovcombo.js和lovcombo.css文件
2、使用控件之前，引入控件的名称空间：Ext.namespace(“Ext.ux.form”);
3、lovcombo控件的调用代码同combo控件，稍作修改：xtype:’lovcombo’,
4、如果要修改combo的输入框显示的内容，只需要修改lovcombo.js文件中的this.setRawValue()函数的参数即可。