PDA

View Full Version : Changing the component of a panel by click event.



pirusira
26 May 2010, 1:46 AM
Hello All,

I've been making a website which has a menu and a container of many components.
When a menu is clicked, the component in the container is supposed to change into another component.

The following is a click event handler.


var menu1 = new Tree.TreePanel({
...
});
menu1.on('click', function(node){
...
//the function of changing the component here.
...
});


The following is the component.


var nestedCenter = new Ext.Panel({
...
items: [item1, item2] //item2 is hidden.
});


I know how to change items in the component by this method


for(i=0;i<nestedCenter.items.length;i++){
nestedCenter.items.items[i].hide();
}
if(node.id=='menu1'){
nestedCenter.items.items[0].show();
}

But in the method, all items must be loaded before the click event is happened.
Then the performance of my website would be bad.
The method that I want to make is that the component is made and changed when the click event is happened.
Does anyone know about this?

Thanks in advance.
Stan

mitchellsimoens
26 May 2010, 7:44 AM
So at the initial load of the website it should load all your components correct? After that it's just merely hiding and showing so yes at the first onset of loading your site it will be slow but after that it should be pretty good.

If you wanted to create and remove components on the fly, use the add and remove functions:


var newPanel = {
xtype : "panel"
title : "New Panel",
html : "Content"
};

panel.add(newPanel);
panel.doLayout();
panel.remove(newPanel);

pirusira
26 May 2010, 9:11 PM
Thank you for your answer.
I applied your code and it worked well.
But in that code, if I click the same menu again, it doesn't work.
Beacause the 'add' method adds the same component again. The component already exists.
So I think there is a method that changes item to the container not add.
Then if I click the same menu again, event handler remove existing item and then put an item in the container.



if(node.id=='menuDevice-2'){
if(nestedCenter.items.items[0]==tmp2){
//do nothing
}
else{
nestedCenter.add(tmp2);
nestedCenter.doLayout();
nestedCenter.remove(nestedCenter.items.items[0]);
}
}


Any idea?