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']]。

 

最后效果如下：