关于 Ext.ux.form.LovCombo的问题

Question

最近要用做一个多选下拉联动combobox，但是在第一步就卡住了：准备用这个扩展 Lovcombo来做，先用官方的示例测试下。

出问题了：下拉列表里只有一竖排checkbox的框，没有选项的名字（应该是显示名字吧），但是可以选择，checkbox框后面是空白的。。

我用的是ext3.0版本。不知道有什么补救办法没？搞了好几天了，快顶不住了。。

补充下：刚用ext2.2版本好像没有问题，我想在3.0版本中用这个扩展，请大家帮下忙。。谢谢啦

Answer 1

那个改的就是3.0版本的呀
//LovCombo.js
[code="java"]
String.prototype.trim = function() {

return this.replace(/^\s+|\s+$/g, '');

}
// add RegExp.escape if it has not been already added

if('function' !== typeof RegExp.escape) {

RegExp.escape = function(s) {

if('string' !== typeof s) {

return s;

}

// Note: if pasting from forum, precede ]/\ with backslash manually

return s.replace(/([.*+?^=!:${}()|[]\/\])/g, '\$1');

}; // eo function escape

}

// create namespace

Ext.ns('Ext.ux.form');

/**

• @class Ext.ux.form.LovCombo
  

• @extends Ext.form.ComboBox
  
  */
  
  Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

  // {{{
  
  // configuration options
  
  /**

  • @cfg {String} checkField name of field used to store checked state.
    
  • It is automatically added to existing fields.
    
  • Change it only if it collides with your normal field.
    */
    checkField:'checked'
    

  /**

  • @cfg {String} separator separator to use between values and texts
    */
    ,separator:','
    

  /**

  • @cfg {String/Array} tpl Template for items.
    

  • Change it only if you know what you are doing.
    
    */
    
    // }}}
    
    // {{{
    
    ,initComponent:function() {

    // template with checkbox
    
    if(!this.tpl) {
    
    this.tpl =
    
    ''
    
    +'

    '
    
    +' +'class="ux-lovcombo-icon ux-lovcombo-icon-'
    +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
    
    +'

    {' + (this.displayField || 'text' )+ '}

    '
    
    +'
    '
    
    +''
    
    ;
    
    }

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

  } // e/o function initComponent
  
  // }}}
  
  // {{{
  
  /**

  • Disables default tab key bahavior
    

  • @private
    
    */
    
    ,initEvents:function() {
    
    Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);

    // disable default tab handling - does no good
    
    this.keyNav.tab = false;

  } // eo function initEvents
  
  // }}}
  
  // {{{
  
  /**

  • clears value
    /
    ,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();
    } // eo function clearValue
    // }}}
    // {{{
    /*
    
  • @return {String} separator (plus space) separated list of selected displayFields
    
  • @private
    /
    ,getCheckedDisplay:function() {
    var re = new RegExp(this.separator, "g");
    return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
    } // eo function getCheckedDisplay
    // }}}
    // {{{
    /*
    
  • @return {String} separator separated list of selected valueFields
    

  • @private
    
    */
    
    ,getCheckedValue:function(field) {
    
    field = field || this.valueField;
    
    var c = [];

    // store may be filtered so get all records
    
    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);
    
    } // eo function getCheckedValue
    
    // }}}
    
    // {{{
    
    /**

  • beforequery event handler - handles multiple selections

  • @param {Object} qe query event

  • @private
    
    /
    
    ,onBeforeQuery:function(qe) {
    
    qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']'), '');
    
    }, // eo function onBeforeQuery
    
    // }}}
    
    // {{{
    
    /**

  • blur event handler - runs only when real blur event is fired
    
    */
    findRecord : function(prop, value){
    var record;
    if(this.store.getCount() > 0){
    this.store.each(function(r){
    if(r.data[prop] == value){
    record = r;
    return false;
    }
    });
    }
    return record;
    },
    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 var rec = this.findRecord(this.displayField, texts[i].trim());
    if(rec){
    values+=(values.length>0?',':'')+rec.data[this.valueField];
    }
    }
    this.setValue(values);
    }
    }
    
    ,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;

    // iterate through raw values and records and check/uncheck items
    
    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();
    
    } // eo function onRealBlur
    
    // }}}
    
    // {{{
    
    /**

  • Combo's onSelect override

  • @private

  • @param {Ext.data.Record} record record that has been selected in the list

  • @param {Number} index index of selected (clicked) record
    
    */
    
    ,onSelect:function(record, index) {
    
    if(this.fireEvent('beforeselect', this, record, index) !== false){

    // toggle checked field   
    record.set(this.checkField, !record.get(this.checkField));   
    
    // display full list   
    if(this.store.isFiltered()) {   
        this.doQuery(this.allQuery);   
    }   
    
    // set (update) value and fire event   
    this.setValue(this.getCheckedValue());   
    this.fireEvent('select', this, record, index);   
    

    }
    
    } // eo function onSelect
    
    // }}}
    
    // {{{
    
    /**

  • Sets the value of the LovCombo

  • @param {Mixed} v value
    
    */
    
    ,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);

[/code]

//LovCombo.css
[code="java"]
.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(../../resources/images/default/menu/checked.gif);

}

.ux-lovcombo-icon-unchecked {

background: transparent url(../../resources/images/default/menu/unchecked.gif);

}
[/code]