Extjs3.2.0 使用插件 LovCombo 多选下拉之心路历程

最新项目需要一个多选功能，最初考虑使用MultiSelect，但是在列布局模式下在IE中怎么都不显示，在firefox中却可以显示，但是显示出来背景色也不对，最后不得不考虑使用另外的插件。（有人在这种情况下正常使用的请留言告知）。

google了，发现还有个LovCombo 多选下拉可以使用，于是找了几篇文章，但是实际弄起来，问题就来了。

最大的问题是版本问题，很多文章都是使用的extjs2.*版本，在extjs3.*下根本不能使用，最后决定自己来弄。

首先到 http://lovcombo.extjs.eu/ 下载了最新的版本，目前最新版本为1.3。

需要注意的几个地方：

1.必须引入LovCombo.css，并且.ux-lovcombo-icon-unchecked 和.ux-lovcombo-icon-checked 需要制定自己项目的正确路径，需自己修改。

2.除了引入LovCombo.js，还必须在之前引入Ext.ux.util.js，否则不能正常使用。

3.关于处理鼠标移开之后焦点失去，以前勾选的项都消失了的问题，需要修改LovCombo.js源代码，在最后的,selectAll:function() {这一行之前添加

,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);
}
},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_r());
}//

，实际上是重写了父类Ext.form.ComboBox的此方法。

4.最后自己js代码：

Ext.onReady(function(){

Ext.QuickTips.init();

//创建记录类型person
var person = Ext.data.Record.create([{
name: 'value',
mapping: 0 //数组第0个元素
}, {
name: 'text',
mapping: 1 //数组第1个元素
}]);

//创建数据解析器
var reader = new Ext.data.ArrayReader({
id: 0 //必须有，数组第0个元素作为记录id
}, person);

//创建HttpProxy代理

var proxy = new Ext.data.HttpProxy({
url: '../../../UserMultiselect'
});

//创建数据集Store
var ds = new Ext.data.Store({
autoLoad: true,
proxy: proxy,
reader: reader
});

var lcc = new Ext.ux.form.LovCombo({
renderTo :'lovcomboct',
name:"inzlststus",
fieldLabel:"资材状态",
store:ds,
mode:'local',
triggerAction:'all',
hideTrigger:false,
allowBlank:true,
displayField:'text',
valueField:'value',
emptyText:'请选择资材类别',
editable:false
});

var tf = new Ext.form.TextField({
renderTo:'textct'
,id:'tf'
,width:300
,selectOnFocus:false
,listeners:{
focus:function() {this.setValue(lcc.getValue());}
}
});

，服务器端返回时数据格式为[['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']]。

最后效果如下：