PDA

View Full Version : How to change display message in an ExtJs Combobox?



ajibarra
25 Jul 2012, 6:19 AM
I have an ExtJs Combobox with multiple true and I want to show "X values selected" on the input field instead of "Value 1, Value 2, Value 3". I tried with select listener but when I set the value to the input field and then you call multicombo.getValue() it takes the value from the input field. I would need something like take the value from the valueField (a hidden input).

My code:




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

}
});