View Full Version : How to replace a region?

13 Aug 2009, 2:17 AM
I need to replace a region (or in general an Item) without remove it and add it again.. (to avoid a refresh issue.

How can I do it?

I haven't found a "update" function or similar..
There is a way?

13 Aug 2009, 7:37 AM
Regions defined in a Border Layout cannot be removed. That said, what exactly are your goals?

13 Aug 2009, 10:18 PM
i need to rebuild completely the center region of a border layout.

e.g... in the center region I have a Grid and a toolbar and same other elements.
when the user push a botton or select a line, I should rebuild another panel with different info and replace it.
sametime I must also copy an element from the original panel and "copy/move" it in the new one.


13 Aug 2009, 10:58 PM
Use a layout:'fit', xtype: 'container' as the center region.

Add your Components to it, and remove them when you're done.

14 Aug 2009, 4:37 AM
I prefer to "replace" and not "remove and add".
Removing give a "flash" effect and this is not very good.
Of course the "flash" effect is bigger on IE and FF.. instead using Chrome is more and more faster and so the "flash" effect have a minor impact.

14 Aug 2009, 4:40 AM
remove + add === replace.

There is no flash.

If there is, it's a mistake you made.

15 Aug 2009, 2:04 AM
Ty animal..
I have the "flash" removing and adding back...
what kind of mistake I can be done ?
Can you please suggest me what check? maybe the most common mistake done from newbie people like me...

15 Aug 2009, 4:20 AM
Ty animal....
what kind of mistake I can be done ?

How can I possibly know?

15 Aug 2009, 6:08 AM
why not get the element of the component in center region and use the updater to update it?

region is just the container defined in border layout, there's should be an item (or panel) inside the region.

15 Aug 2009, 6:20 AM
"element" or "container"? What are you suggesting? HTML or Cmponents?

@OP. Make The center region

region: 'center',
id: 'center-container',
xtype: 'container',
layout: 'fit

Then you just do

var c = Ext.getCmp('center-container');
if (c.items.items.length) {

15 Aug 2009, 6:59 AM
I walk people through that on my border layout screencast :

18 Aug 2009, 7:38 AM
Why not use CardLayout on the center region and simply do an add-and-switch action (add the second panel/item then call setActiveItem() to activate it)?