Use of Ext Element: adding /replace options in a select box?

[Wolfgang]

I am looking for a nice example that shows how to add or replace option in a select or list box using Ext element objects.

So far i came up with :


// 'PageSize' is the id of an existing select element
var opt = [1,10,20,50,100,200,300,500];
var dd = Ext.get('PageSize').dom;
for (var i=0; i<opt.length; i++) {
dd.options.add(new Option(opt[i], opt[i]));
}


But i am sure there are better ways.

So can can anyone show an example of how to add and replace options using a more "Ext Style"?

[tryanDLS]

I think that's the best your going to do. There have been a couple threads regarding this. Basically IE won't let you manipulate the innerHTML/Dom of the Select object (to insert via template for instance). You have to add/remove Option objects from the collection.

[Wolfgang]

Thanks,

Iif this is a good way, how would i reset the optionlist. The only way i can think of is:


var dd = Ext.get('PageSize').dom;
dd.options.length = 0;


If this is ok, would the browser free the previous options elements during its internal garbage collection to avoid a memory leak?

[tryanDLS]

I think that's fine - it's pretty much the accepted way to clear an array of simple objects.

[Wolfgang]

Just another quick related questions. How to set selected and defaultSelected?

This one works


function setSelOptions(el, optText, opt, def) {
var dd = Ext.get(el).dom;
dd.options.length = 0;
for (var i=0; i<opt.length; i++) {
dd.options.add(new Option(optText[i], opt[i]));
if(opt[i] == def) {
dd.options[i].selected = true;
dd.options[i].defaultSelected = true;
}
}
}


This one fails to set the selection:


function setSelOptions(el, optText, opt, def) {
var dd = Ext.get(el).dom;
dd.options.length = 0;
for (var i=0; i<opt.length; i++) {
if(opt[i] == def) {
dd.options.add(new Option(optText[i], opt[i], true, true));
} else {
dd.options.add(new Option(optText[i], opt[i]));
}
}
}


I thought that the constructor can take the values for selected and defaultSelected?