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

Featured Image

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 += '<option value="">Select...</option>';
tablefieldsInnerHTML += '<option value="'+el.value+'">'+el.label+'</option>';
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+.

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>.