2012-07-25 38 views
3

我有一个ExtJs组合框具有多个true,我想在输入栏中显示“X值选定”而不是“值1,值2,值3”。我尝试使用select listener,但是当我将值设置为输入字段,然后调用multicombo.getValue()时,它将从输入字段获取值。我需要像valueField(隐藏的输入)中的值。如何在ExtJs Combobox中更改显示消息?

我的代码:

var multiCombo = Ext.create('Ext.form.field.ComboBox', { 
    renderTo: item.id, 
    multiSelect: true, 
    displayField: 'name', 
    editable: false, 
    valueField: 'id', 
    emptyText: 'Select', 
    hiddenName: 'data[Model][' + item.getAttribute('question-id') + '][value]', 
    submitValue: true, 
    inputType: 'hidden', 
    value: selectedOptions, 
    width: 300, 
    store: store, 
    queryMode: 'local', 
    listeners: { 
     expand: function (combo) { 
      var values = Ext.get(combo.hiddenDataEl.dom.lastChild).dom.value; 
      values = values.split(","); 
      Ext.each(values, function (value, i) { 
       values[i] = parseInt(value); 
      }); 
      combo.setValue(values); 
      Ext.get(combo.getInputId()).dom.value = values.length + ' selected'; 
     }, 
     select: function (combo, values) { 
      if (values[values.length - 1].data.id === parseInt(item.getAttribute('not-applicable'))) { 
       combo.setValue(parseInt(item.getAttribute('not-applicable'))); 
      } else { 
       var notApplicable = -1; 
       var newValues = combo.getValue(); 
       if ((notApplicable = combo.getValue().indexOf(parseInt(item.getAttribute('not-applicable')))) != -1) { 
        newValues.splice(notApplicable, 1); 
       } 
       combo.setValue(newValues); 
      } 
      Ext.get(combo.hiddenDataEl.dom.lastChild).dom.value = combo.getValue().join(','); 
      optionsSelected = combo.getValue(); 
      Ext.get(combo.getInputId()).dom.value = optionsSelected.length + ' selected'; 
     }, 
     change: function (combo) { 
      if (item.getAttribute('required') == 'true') { 
       if (combo.getValue().length == 0) { 
        question.findParentNode('li', 1, true).addCls("is_required"); 
       } else { 
        question.findParentNode('li', 1, true).removeCls("is_required"); 
       } 
       //There is no ExtJs equivalent for this 
       $('#' + combo.getInputId()).keyup(); 
      } 
     } 

    } 
}); 

回答

2

我不知道,我关注你是怎么回事所有的事件处理程序(所以我可能失去了一些东西),但最简单的方式来实现你所描述的在你上面的第一句话是提供你自己的实施组合的getDisplayValue方法。 Here它在文档中。

只需设置它即可返回选择了多少个值的计数。这里有一个例子:

var multiCombo = Ext.create('Ext.form.field.ComboBox', { 
    renderTo: item.id, 
    multiSelect: true, 
    displayField: 'name', 

    // your own getDisplayValue implementation 
    getDisplayValue: function() { 
     return multiCombo.value.length + ' values selected'; 
    }, 

    editable: false, 
    valueField: 'id', 
    emptyText: 'Select', 
    hiddenName: 'data[Model][' + item.getAttribute('question-id') + '][value]', 
    submitValue: true, 
    inputType: 'hidden', 
    value: selectedOptions, 
    width: 300, 
    store: store, 
    queryMode: 'local', 
}); 
1

而且这可能会帮助:

getDisplayValue: function() { 
      return (this.displayTplData.length > 1) ? this.displayTplData.length + ' selected' : this.displayTplData[0].name; 
     },