1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    31
    Vote Rating
    1
    zeke is on a distinguished road

      0  

    Default Moving a gridpanel from one component to another

    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:

    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
    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You will need to have separate instances of the grid:

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Oct 2008
    Posts
    31
    Vote Rating
    1
    zeke is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Oct 2008
    Posts
    31
    Vote Rating
    1
    zeke is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    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:
    Code:
    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()
        });
    });

  7. #7
    Sencha User
    Join Date
    Oct 2008
    Posts
    31
    Vote Rating
    1
    zeke is on a distinguished road

      0  

    Default


    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:

    Code:
    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.