Grid not rendering properly in card layout

[dbassett74]

I'm not sure if I'm missing something here, but here is the problem. I have a Window, which contains a Panel with a card layout. In both the first and second cards, I have a grid. Both grids have an autoexpand column defined. The first visible card, shows a properly expanded column in the grid. However, when showing card two, the column is not expanded. I tried issuing a doLayout() on the grid, but that doesn't seem to work. Can someone help me here?

[Animal]

It should work. Show some code.

[dbassett74]

Okay, I will try to create a sample app with minimum code to show the problem. Thanks.

[dbassett74]

Here's the code. It seems that if the grid is in a panel with an absolute layout, as an item in a card layout, the problem occurs (autoexpand column not working). I need this nested layout because I need control over the layout of items in the card panel, but the card panel is a fix layout.

var pnl = new Ext.Panel({
    layout: "card",
    height: 400,
    width: 600,
    items: [
        { xtype: "panel", layout: "absolute", 
            items: [
                { xtype: "grid", width: 550, height: 300, x: 20, y: 20,
                    store: new Ext.data.JsonStore({
                        sortInfo: {
                            field: 'id',
                            direction: 'DESC'
                        },
                        id: 'id',
                        fields: ['id', 'employee', 'message']
                    }),
                    columns: [
                        { header: 'Name', dataIndex: 'employee', width: 50  },
                        { header: 'Message', dataIndex: 'message', id: "message" }
                    ],
                    autoExpandColumn: 'message'
                }
            ]                
        }
    ],
    renderTo: "divBody"
});

pnl.layout.setActiveItem(0);

[Animal]

Yes, something funny going on. A simplified testcase:

var pnl = new Ext.Panel({
    title: 'Single card panel',
    layout: "card",
    height: 400,
    width: 600,
    items: {
        xtype: "container", 
        items: {
            xtype: "grid", width: 550, height: 300,
            store: new Ext.data.JsonStore({}),
            columns: [
                { header: 'Name', dataIndex: 'employee', width: 50  },
                { header: 'Message', dataIndex: 'message', id: "message" }],
            autoExpandColumn: 'message'
        }
    },
    renderTo: document.body
});
pnl.layout.setActiveItem(0);

Looks like it's allocating space before the View is rendered (which only happens when the setActiveItem is called)

[Animal]

And this works:

Ext.getBody().update('')
var pnl = new Ext.Panel({
    title: 'Single card panel',
    layout: "card",
    height: 400,
    width: 600,
    items: {
        xtype: "container", 
        items: {
            id: 'grid',
            xtype: "grid", width: 550, height: 300,
            store: new Ext.data.JsonStore({}),
            columns: [
                { header: 'Name', dataIndex: 'employee', width: 50  },
                { header: 'Message', dataIndex: 'message', id: "message" }],
            autoExpandColumn: 'message'
        }
    },
    renderTo: document.body
});
pnl.layout.setActiveItem(0);
Ext.getCmp("grid").view.layout();

It needs laying out on activation

[Animal]

And this works:

Ext.getBody().update('')
var pnl = new Ext.Panel({
    title: 'Single card panel',
    layout: "card",
    height: 400,
    width: 600,
    items: {
        xtype: "container", 
        items: {
            id: 'grid',
            xtype: "grid", width: 550, height: 300,
            store: new Ext.data.JsonStore({}),
            columns: [
                { header: 'Name', dataIndex: 'employee', width: 50  },
                { header: 'Message', dataIndex: 'message', id: "message" }],
            autoExpandColumn: 'message'
        }
    },
    renderTo: document.body
});
pnl.layout.setActiveItem(0);
Ext.getCmp("grid").view.layout();

It needs laying out on activation

[dbassett74]

It works! So is this a bug?