Card Layout initially rendering grid small on setActiveItem...

[jasondeegan]

Howdy gang,

I have a card layout filled with several panels (each is a parent of its own because it contains a search region and at least one grid panel) like this one:

var applicationsGrid = new Ext.grid.GridPanel({
	title: 'applications', id:'applicationsGrid', store: applicationsStore, columns:applicationsColumns, margins: '0', region:'center', frame: false, dautoSize:true, disableSelection:true, trackMouseOver: false, stripeRows:true,
	viewConfig: { forceFit:false },
	listeners: {
		cellclick: function(grid, rowIndex, colIndex) {
			alert( 'applications' );
		}
	},
	tbar:[ { xtype: 'tbfill' },{ text: 'Add applications', handler : function(){ addUpdateapplications(); } }],
	bbar: [ new Ext.PagingToolbar({ pageSize: 25, store: applicationsStore, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}' }) ]
});

When I setActiveItem on the grid panel's parent, it initially renders the grid as small as it can (essentially either using the height: and width: specified, or if none specified, according to its minimum size) and then immediately grows it to fit the entire parent card. Next time I setActiveItem on that grid, it is already fit.

Anyone have insight?

I tried:

Ext.getCmp('content-panel').doLayout( false, true );
	Ext.getCmp('content-panel').syncSize();

Neither worked.

UPDATE:
calling setActiveItem on each panel consecutively and then the home panel last is a workaround, but it's not a solution.

Note: I'm assuming this is a simply oversight on my part (thinking that because I don't see anyone else saying this), that's why no test is included. If no answer, I'll spend the 10 minutes to make one.

[jay@moduscreate.com]

My knee-jerk reaction is to reformat your code, as it is really hard to read in its current state.

var applicationsGrid = new Ext.grid.GridPanel({
    title: 'applications',
    id: 'applicationsGrid',
    store: applicationsStore,
    columns: applicationsColumns,
    margins: '0',
    region: 'center',
    frame: false,
    dautoSize: true,
    disableSelection: true,
    trackMouseOver: false,
    stripeRows: true,
    viewConfig: {
        forceFit: false
    },
    listeners: {
        cellclick: function (grid, rowIndex, colIndex) {
            alert('applications');
        }
    },
    tbar: [{
        xtype: 'tbfill'
    },
    {
        text: 'Add applications',
        handler: function () {
            addUpdateapplications();
        }
    }],
    bbar: [new Ext.PagingToolbar({
        pageSize: 25,
        store: applicationsStore,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}'
    })]
});

[jay@moduscreate.com]

Your bbar should be

    bbar: new Ext.PagingToolbar({
        pageSize: 25,
        store: applicationsStore,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}'
    })

(removing the brackets)

[jay@moduscreate.com]

Setting "region" on a component that is not taking part of a border layout is useless.

    region: 'center',

The following is not a valid configuration option!

    dautoSize: true,

[jay@moduscreate.com]

Looking at your UI, you seem to be over-nesting. With the little bit of code you've provided, I can't provide a solution. My only suggestion is to have the grid panel as a direct child of the container implementing the card layout.