ext.ux.form.lovcombo

Ext.ux.form.lovcombo.js

if('function' !== typeof RegExp.escape) {
RegExp.escape = function(s) {
   if('string' !== typeof s) {
    return s;
   }
   return s.replace(/([.*+?^=!:${}()|[/]])/g, '//$1');
};
}

// create namespace
Ext.ns('Ext.ux.form');

Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

checkField:'checked'

    ,separator:','

    ,initComponent:function() {
      
   // template with checkbox
   if(!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 handlers
   this.on({
    scope:this
    ,beforequery:this.onBeforeQuery
    ,blur:this.onRealBlur
    ,focus:this.myFocus
   });

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

    }
,initEvents:function() {
   Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);

   this.keyNav.tab = false;

}
,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();
}
,getCheckedDisplay:function() {
   var re = new RegExp(this.separator, "g");
   return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
}
我要在这里重写吗
,beforeBlur: function(){
       console.log('焦点离开时有调用吗');
}
,getCheckedValue:function(field) {
   field = field || this.valueField;
   var c = [];
   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);
}
,onBeforeQuery:function(qe) {
   qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');
}
,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;
   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();
}
,myFocus:function(){
    //alert(this.getValue());
    this.setValue(this.getValue());

}
,onSelect:function(record, index) {
        if(this.fireEvent('beforeselect', this, record, index) !== false){

    record.set(this.checkField, !record.get(this.checkField));

    if(this.store.isFiltered()) {
     this.doQuery(this.allQuery);
    }

    this.setValue(this.getCheckedValue());
            this.fireEvent('select', this, record, index);
        }
}
,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 + '|$)'))
      ;
//      alert(checked);
      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);

test.html

<script type="text/javascript">
Ext.onReady(function(){

     var combo = new Ext.ux.form.LovCombo({ 
           width:600, 
           hideOnSelect:false, 
           maxHeight:200, 
           renderTo:'xs',
           store:new Ext.data.SimpleStore({ 
             id:0, 
             fields:['pid', 'imageName'] ,
             data:[['电脑','电脑'],['显示器','显示器'],['鼠标','鼠标']]
           }), 
           triggerAction:'all', 
           valueField:'pid', 
           displayField:'imageName', 
           mode:'local', 
          
         });
});
</script>

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(../images/default/menu/checked.gif); 
} 
.ux-lovcombo-icon-unchecked { 
    background: transparent url(../images/default/menu/unchecked.gif); 
}