While working with Editor Grid of ext js, I noticed that if a combobox is used in some column for editing, then it shows the option value instead of label. This forces you to keep option label and value same. But this is not possible always.
Searching the extjs forum for this problem, I got a hint from one of the post to use renderer in this situation.
To make this work, you first have to fetch all the options of the combobox and create a Javascript array through it which can then be used in renderer function.
JavaScript:
-
var comboVals = document.getElementById('combo-id').options;
-
-
var comboArr = new Array;
-
-
for (var i = 0; i <comboVals.length; i++) {
-
comboArr[comboVals[i].value] = comboVals[i].text;
-
}
Now write a renderer function like,
JavaScript:
-
var comboRenderer = function (val) {
-
if (comboArr[val] != undefined) {
-
return comboArr[val];
-
} else {
-
return val;
-
}
-
}
The above function will return the label for the selected value if found the array otherwise it will simply return the value itself.
Hi, I test your example but it show a error, it can't find document.getElementById('combo-id'), maybe extjs assign a different id???
thanks
@Joshua - 'combo-id' is just a placeholder. Replace it with the actual id of the drop-down you are working with.
Great work, thanks a lot.
There`s one issue, you should mention. If you use transformation of an existing HTML select box into an ExtJS one, the original select box will be lost after this process. So you have to perform your code before the transformation.
where to add this code ? after declaring combobox?
I have the same question. My combo box is gone. Can you be specific about the order here? Just won't for me if i I loose the combo.
Here's a more elegant solution:
function(val) {
return theComboBox.getStore().getById(val).data.nameOfDisplayField;
}
Replace "theComboBox" with your combo object and "nameOfDisplayField" with the field that you want to be displayed.
The data is already in an array, inside the combo's store, so there is no need to create an additional array.