1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
    dbassett74 is on a distinguished road

      0  

    Default Grid not rendering properly in card layout

    Grid not rendering properly in card layout


    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?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It should work. Show some code.

  3. #3
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
    dbassett74 is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
    dbassett74 is on a distinguished road

      0  

    Default


    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.

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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, something funny going on. A simplified testcase:

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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    And this works:

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

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    And this works:

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

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
    dbassett74 is on a distinguished road

      0  

    Default


    It works! So is this a bug?

Thread Participants: 1