Handling options injection in “select” element by Ext.js

So you would like to make dynamic dropdown list using Ext.js and you want it to be browser compatible, including IE browsers. You could use innerHtml to inject options in your “select” element of a dropdown list. Which looks like:

Ext.Ajax.request({
url: '< ?php someurl ?>',
method: 'POST',
success: function(datax){
jsonData = Ext.util.JSON.decode(datax.responseText);
 
var objDropdown = document.getElementById('tablefields');
 
var tablefieldsInnerHTML = '';
tablefieldsInnerHTML += 'Select...';
 
Ext.each(jsonData,function(el){
tablefieldsInnerHTML += ''+el.label+'';
});
 
Ext.get('tablefields').dom.innerHTML = tablefieldsInnerHTML;
},
failure: function(datax){
Ext.get('tablefields').dom.innerHTML = '';
Ext.Msg.alert('Status', 'Ajax error occured while trying to retrieve the fileds for '+selectedOptionElementValue+' table');
},
 
params: {
selectedIndexValue: selectedOptionElementValue,
}
});

When you test this code in browsers it works in all of them except IE, because the IE doesn’t support injection of innerHtml in the select elements.

If you wish to inject something in select elements, for it to work in IE you have to use DOM function. Now the part of code that injects options in select element looks like this:

var objDropdown = document.getElementById('tablefields');
 
var elll = Ext.get('tablefields').dom;
 
Ext.each(jsonData,function(el){
elll.options.add(new Option(el.value, el.label));
});

And if you now check it in the browsers it works in all of them, including IE 6+.
Cheers!