Showing combobox option instead of value in editor grid for extjs

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.

PLAIN TEXT
JavaScript:
  1. var comboVals = document.getElementById('combo-id').options;
  2.  
  3. var comboArr = new Array;
  4.  
  5. for (var i = 0; i <comboVals.length; i++) {
  6.     comboArr[comboVals[i].value] = comboVals[i].text;
  7. }

Now write a renderer function like,

PLAIN TEXT
JavaScript:
  1. var comboRenderer = function (val) {
  2.     if (comboArr[val] != undefined) {
  3.         return comboArr[val];
  4.     } else {
  5.         return val;
  6.     }
  7. }

The above function will return the label for the selected value if found the array otherwise it will simply return the value itself.

About this entry

You’re currently reading “ Showing combobox option instead of value in editor grid for extjs ,” an entry on SANIsoft - PHP for E Biz

Published:
6.6.07 / 11am
Category:
Extjs, HowTo, Javascript
Author:
Aditya Mooley
RSS for this Author