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:

url: '< ?php someurl ?>',
method: 'POST',
success: function(datax){
jsonData = Ext.util.JSON.decode(datax.responseText);
var objDropdown = document.getElementById('tablefields');
var tablefieldsInnerHTML = '';
tablefieldsInnerHTML += 'Select...';
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;
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+.

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, | 2

How to improve usability for Magento 2 add to cart process

More/Less functionality in Magento2 Danijel Vrgoc
, | 6

More/Less functionality in Magento2

Javascript Bundling in Magento 2 Nenad Andrakovic
Nenad Andrakovic, | 18

Javascript Bundling in Magento 2

1 comment

  1. Congratulations Iva on your first Inchoo article.

    Message to the world: Iva is our first female eCommerce developer in the team. She joined recently and we all hope we will see more articles from her 😉

    Great one!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

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