Moving a gridpanel from one component to another

I have some components, which include a gridpanel, set in another panel with a card layout (cardPanel). When the user clicks a button I'd like to create a window with a border layout (borderWindow) and then put the gridpanel and a couple other items into that. I'd like to have the user be able to go back and forth. I've got it working okay, but when I remove the gridpanel from one component and add it to the other the grid is not fully rendered. When moving it to cardPanel, I can call cardPanel.layout.setActiveItem(grid) and the grid is rendered properly. But I can't do this when I move the grid to borderWindow because of course there is no setActiveItem for a border layout. I can get this to work if I nest a card layout in borderWindow but I figure there is probably a better way to do this.

Also if anyone has any advice on moving items from one component to another in general, I'd be grateful. Thanks. Some rough code that shows what I am doing:

I'd like to do this using a single instance of the grid so that stuff like sorting and filtering is preserved. I assume it also would use less memory. Seems to work fine as long as I move (aka remove from one component and add to another) the grid to a component with a card layout and then call setActiveItem(grid). Calling setActiveItem is just completing the rendering of the grid after it's been moved so I'm just trying to figure out how to do that rendering without using card layouts and setActiveItem.

Your borderWindow center region doesn't have a layout. Perhaps the grid is larger than the container and the scroll bars/paging bar are cut off? Try putting something like layout: 'fit' on that region and see what happens.

Last edited by Tim Toady; 19 Sep 2012 at 10:59 AM.
Reason: Removed part about version. Obviously 4.x based on code. I should have l thought about it before posting that question

Your borderWindow center region doesn't have a layout. Perhaps the grid is larger than the container and the scroll bars/paging bar are cut off? Try putting something like layout: 'fit' on that region and see what happens.

Nah, it's not a matter of things getting cut off. The loadmask and header of the grid also don't always render fully unless setActiveItem is called.

I tried playing with it but can't replicate the issue. Only modifications I made were to make it testable by changing your class to a grid since I don't have the definition and some sizes and rendering them and globals because I was using firebug. Is there something more to the code that could be affecting it? Here is what I tested with:

Your borderWindow center region doesn't have a layout. Perhaps the grid is larger than the container and the scroll bars/paging bar are cut off? Try putting something like layout: 'fit' on that region and see what happens.

Sorry for rejecting this at first. Stuff wasn't being cut off exactly, but setting a layout did help. I still had to do some other things to ensure the grid was rendered correctly after moving it, like calling grid.hide() and then grid.show().

When moving everything back to the card layout I had to add and activate them in one at a time, like so: