Moving a gridpanel from one component to another

[zeke]

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:

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
}

[scottmartin]

You will need to have separate instances of the grid:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'Lisa',  'email':'lisa@simpsons.com',  'change':100  },
        { 'name': 'Bart',  'email':'bart@simpsons.com',  'change':-20  },
        { 'name': 'Homer', 'email':'home@simpsons.com',  'change':23   },
        { 'name': 'Marge', 'email':'marge@simpsons.com', 'change':-11   }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.define('MY.grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.simpsonsgrid',
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
    ]
});    

Ext.onReady(function() {
	var items = [{}];

	var button1 = new Ext.Button({
		text: 'Create Tab',
		width: 150,
		renderTo: Ext.getBody(),
		handler: Ext.Function.bind(addTab, this, [ this.text ], true)
	});

	var tabPanel = Ext.createWidget('tabpanel', {
		itemId: 'mytabpanel', 
		renderTo: Ext.getBody(),
		resizeTabs: true,
		enableTabScroll: true,
		width: 600,
		height: 500,
		defaults: {
			autoScroll: true,
			bodyPadding: 10
		},
		items: items
	});

	function addTab(item,event,text,id){
		var id = tabPanel.items.length;
		var tab = tabPanel.add({
			title: 'text-'+id,
			itemId: 'id-'+id,
			layout: {
			    type: 'vbox',
			    align : 'stretch',
			    pack  : 'start',
			},
			closeAction: 'close',
			closable: true,
			border: false,
			items: [
			{
				xtype: 'simpsonsgrid',
				title: 'Simpsons Grid '+id
			}]

		});

		tabPanel.doLayout();
		tabPanel.setActiveTab(tab);
	}
});

Scott.

[zeke]

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.

[Tim Toady]

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.

[zeke]

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.

[Tim Toady]

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:

Ext.onReady(function () {
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'MyGrid',
        columns: [{
            text: 'test',
            dataIndex: 'text'
        }, {
            text: 'test2'
        }],
        store: Ext.create('Ext.data.Store', {
            fields: ['text'],
            data: [{
                text: 'dfh'
            }, {
                text: 'zfh'
            }, {
                text: 'afh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }, {
                text: 'dfh'
            }]
        })
    });
    cardPanel = Ext.create('Ext.panel.Panel', {
        layout: 'card',
        width: 400,
        height: 200,
        activeItem: 0,
        renderTo: Ext.getBody(),
        autoDestroy: false,
        items: [grid]
    });
    borderWindow = Ext.create('Ext.window.Window', {
        layout: 'border',
        height: 400,
        width: 400,
        items: [{
            region: 'center',
            layout: 'fit',
            title: 'center region',
            autoDestroy: false
        }, {
            region: 'south',
            title: 'south regoin',
            html: 'dummypanel',
            height: 200
        }]
    });
    cardToBorder = function () {
        cardPanel.remove(grid);
        borderWindow.items.items[0].add(grid);
    }
    borderToCard = function () {
        borderWindow.items.items[0].remove(grid);
        cardPanel.add(grid);
        //cardPanel.layout.setActiveItem(grid);
    }
    borderWindow.show();
    Ext.create('Ext.button.Button', {
        text: 'toBorder',
        handler: function () {
            cardToBorder();
        },
        renderTo: Ext.getBody()
    });
    Ext.create('Ext.button.Button', {
        text: 'toCard',
        handler: function () {
            borderToCard();
        },
        renderTo: Ext.getBody()
    });
});

[zeke]

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:

cardPanel.remove(item1);
borderWindow.setActiveItem(item1);

cardPanel.remove(item2);
borderWindow.setActiveItem(item2);

cardPanel.remove(item3);
borderWindow.setActiveItem(item3);

Also, using Ext.suspendLayouts() and Ext.resumeLayouts(true) helped a lot in making everything go smoothly.