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:

Code:
var grid = Ext.create('MyApp.gridpanel');

var cardPanel = Ext.create('Ext.panel.Panel',{
    layout:'card',
    activeItem:0,
    autoDestroy: false,
    items:[grid]
});


var borderWindow = Ext.create('Ext.window.Window',{
    layout:'border',
    items:[{
        region:'center',
        title:'center region',
        autoDestroy: false
    },{
        region:'south',
        title:'south regoin',
        html:'dummypanel',
        height:200
    }]
});
        
function cardToBorder(){
    cardPanel.remove(grid);
    borderWindow.items.items[0].add(grid);
//grid not fully rendered at this point (scrollbars, paging toolbar, loadmask,etc missing)
//not sure what to do to fully render it
}
        
function borderToCard(){
    borderWindow.items.items[0].remove(grid);
    cardPanel.add(grid); 
    //grid not fully rendered at this point (scrollbars, paging toolbar, loadmask,etc missing)
            
            
    cardPanel.layout.setActiveItem(grid);
//grid is now fully rendered
}