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

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!

You made it all the way down here so you must have enjoyed this post! You may also like:

How to improve usability for Magento 2 add to cart process Filip Svetlicic
Filip Svetlicic

How to improve usability for Magento 2 add to cart process

More/Less functionality in Magento2 Danijel Vrgoc
Danijel Vrgoc

More/Less functionality in Magento2

Javascript Bundling in Magento 2 Nenad Andrakovic
Nenad Andrakovic

Javascript Bundling in Magento 2

Tell us about your project

Drop us a line. We'd love to know more about your project.