Ext.ux.form.LovCombo.js在ext3.4.0下选择多个选项，当鼠标离开，已选择项目就消失了的解决办法

首先了，要先下载lovcombo 地址为http://lovcombo.extjs.eu/

extjs3.0和这个东东了有个bug，就是选择后失去焦点值会消失

修复方法，在Ext.ux.form.LovCombo.js加上beforeBlur，方法为

在Ext.ux.form.LovCombo.js的setValue前面加上

 

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); 
    } 
    }

 

就可以了

html代码为

 

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 data=[[1,"one"],[2,"dfdfs"],[3,"gerge"],[4,"dfdsfsdf"]];
var proxy=new Ext.data.MemoryProxy(data);
 
 //创建数据集Store
 var ds = new Ext.data.Store({
     autoLoad: true,
     proxy: proxy,
     reader: reader
 });

 var lcc = new Ext.ux.form.LovCombo({
  renderTo :Ext.getBody(),
   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:Ext.getBody()
  ,id:'tf'
  ,width:300
  ,selectOnFocus:false
  ,listeners:{
   focus:function() {this.setValue(lcc.getValue());}
  }
 });
 lcc.render
 })

 

如果图片不显示修改其Ext.ux.form.LovCombo.css的图片路径

忘记了一个关键问题，要导入的css，js文件

 

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />  
 <link rel="stylesheet" type="text/css" href="js/ajax/extjs/lovc/css/Ext.ux.form.LovCombo.css">

  <script type="text/javascript" src="js/ajax/extjs/ext/adapter/ext-base.js"> </script>
  <script type="text/javascript" src="js/ajax/extjs/ext/ext-all.js"> </script>
  <script type="text/javascript" src="js/ajax/extjs/lovc/js/Ext.ux.form.LovCombo.js"></script>

不要忘记前后顺序哦！