PDA

View Full Version : Dynamically adding / removing checkboxes



jeffita
9 Aug 2007, 12:30 PM
I am building an application which has a combobox and a list of checkboxes.
I would like the checkbox list to change dynamically depending on the user selection in the combobox.

I already have setup a nice dynamically built combobox using a jsonstore.

Now what I'm attempting to do is dynamically add the checkboxes.

My plan is to add each new checkbox to an array as I add it to the page.
This way later when I need to refresh the page I can walk through this array and
call destroy, then call the remove method on the form object for each of these components.
To test this I added a number of checkboxes to the page, then destroyed and removed them.
This much works fine - the checkboxes do not display on the page. (as expected)

I have an event handler for the combobox load.

Next, I need some means to add checkboxes.

I am trying to figure out how best to add the checkboxes (I'm pretty new to ExtJs but have been scanning these forums and searching the example code). I saved a reference to the Ext.Form.Layout (created by a call to the container method for the form) I created when setting up the checkbox region of my form. Ideally I would just call the add method on this container for each component I want to add - BUT looking at the code there is no add method which would allow this.

Another scheme which comes to mind would be to put a div placeholder on the page dynamically as I am creating the form, then I could use the domhelper and insertafter to insert a new container with all my new checkboxes perhaps?? I'm a bit confused though since that would mean I was attempting to insert ExtJs widgets - and I think domhelper is meant for inserting HTML.

In yet another possibility, I suppose I could just use a div placeholder, generate the HTML for the checkboxes as a string, and insert it using domhelper since I don't think I'm going to care much to have event handlers for the checkboxes.

I am having a little trouble wrapping my head around how components interact with / change the html and how I might need to manually poke around to do what I want - or perhaps I'm missing a helpful method somewhere. I've been looking at the source code hoping to find a nice addComponent method in a class somewhere (perhaps the Layout class).

I'd appreciate some thoughts on how best to implement this - part of things are working now but I need the last bit or perhaps a better overall implementation approach.

Thank you in advance for any comments and assistance you might lend!

I've perhaps rambled a bit to much here... you probably would like to see some code....

First the chunk of code which is before the form render and adds some checkboxes and removes them again as a test of part of my strategy. I am re-using a two column checkbox list with overflow from
a posting I saw in the forums here.




form_ur.add(

fromlistcontainercomponent=form_ur.container({ id: 'fflistcontainer',labelWidth:5,labelSeparator:'',style:'overflow:auto;h\
eight:120px;border:1px solid #ccc;margin:4px 15px 4px 0px;'})
);

// Strategy for when we need to update checkbox list
// Having kept a list of all components we add, we can call destroy on each
// Then get the container with id fflistcontainer, and finally create new checkbox components, and adding each to the container as we go


// Now build TEST list of checkboxes
tidx=0;
ffcomplist = new Array();
cb1= new Ext.form.Checkbox({
boxLabel: 'username',
tabIndex: tidx+1,
checked: true,
name:'Cnpj_username',
inputValue: 'username1'
});
form_ur.add(cb1);
ffcomplist.push(cb1);

// TEST that this strategy will work by removing them
for (x in fromfarmcomplist) {
ffcomplist[x].destroy;
form_ur.remove(ffcomplist[x]);
}
ffcomplist = new Array();



Now...the event handler for the combobox load event.




function updateFFStoreList(store, records, options) {
console.warn("Hi");
console.warn("First some cleanup - remove any items in the ff list");

// Clean up existing list of ff list
for (x in ffcomplist) {
ffcomplist[x].destroy;
form_ur.remove(ffcomplist[x]);
}
ffcomplist = new Array();

// Add new ones to fflistcontainercomponent
console.warn("Now we will add each new item to the farm list");
ffStore.each(addFFListItem);

}


I could include the code which attempts to add each checkbox to the page, but it's not working (hence my question) so there is little point. The part which does work of course are calls to create new checkboxes.
I just need to somehow get these added to the page.

Thank you again for any thoughts you might have on this question.