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

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

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

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

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

3个回答

那个改的就是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]

老版本的东西肯定要改它源码可行的。
Ext的论坛有好几种多选下拉列表,建议你自己去搜索

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐