ext lovcombo的使用

 

如下LovCombo.js      ////////代码直接考过去用就行了

 

f('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
   });

   // 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 + ' ');
} 
,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();
} 
,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 + '|$)'))
      ;

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

在另一个extjs中应用这个样式


Ext.namespace("Ext.ux.form");//在文件头不要忘记引用命名空间

{/////////////////////////////////////////这个原先的xtype是combo的，下拉单选框
         columnWidth : 1,
         border : false,
         layout : 'form',
         items : [{
           hideLabel:true,
           hidden:true,


           xtype:'lovcombo',//就是这一句了，没有其他了，有效代码就这两句，命运折腾人呀


           fieldLabel : '协办部门',
           name : 'xiebanDeptId',
           id : 'xiebanDeptId',
           anchor : '98%', // nessasary
           allowBlank : false,
           displayField : 'deptName',
           valueField : 'deptId',
           editable : false,
           triggerAction : 'all',
           allowBlank : true,
           blankText : '请指定协办部门',
           emptyText : '请指定协办部门',
           store : Neo.frontdesk.deptStore

         }]
        }]
     }



 
 效果如图:

落了一个地方，要加添加一个css文件，否则不会显示复选框，我的这个就没显示，加上css就可以了。

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