Results 1 to 8 of 8

Thread: Grid not rendering properly in card layout

  1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default 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
    Bédoin/Redwood City
    Posts
    30,625
    Vote Rating
    56
      0  

    Default

    It should work. Show some code.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      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
      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
    Bédoin/Redwood City
    Posts
    30,625
    Vote Rating
    56
      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)
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,625
    Vote Rating
    56
      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
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,625
    Vote Rating
    56
      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
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    It works! So is this a bug?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •