1. #1
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default Grid not auto expanding column when displayed collapsed

    Grid not auto expanding column when displayed collapsed


    Hi all,
    I have a border layout, and in the west region an accordion layout, one of the panels in that accordion contains a grid. The config for this is below. If I start the west panel non-collapsed, the table displays perfectly and the "Name" column takes up most of the width of the table. If I start with the west panel collapsed (collapsed: true), then the "name" column of the table is not taking up the width of the table when that panel is expanded.

    I note that this only happens in the following config if the panel with id 'empty-container' is not there.

    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
        PET.Utility.initialLoad();
    });
    
    PET.Utility.initialLoad = function() {
        page = new Ext.Viewport({
            layout: 'border',
            items: [{
                region: 'north',
            },
            {
                id: 'body-id',
                region: 'center',
                baseCls: 'body',
                defaults: {
                    labelWidth: '300px'
                },
            },
            {
                border: true,
                collapsible: true,
                collapsed: true,
                layout: 'accordion',
                region: 'west',
                title: 'Side panel',
                width: 450,
                items: [{
                    labelWidth: '380',
                    layout: 'form',
                    title: 'Process queue',
                    items: [{
                        id: 'empty-container',
                        items: [{
                            xtype: 'grid',
                            border: false,
                            viewConfig: {
                                forceFit: true
                            },
                            width: '100%',
                            autoHeight: true,
                            stripeRows: true,
                            disableSelection: true,
                            colModel: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                                header: 'Name',
                                id: 'C1',
                                align: 'left',
                                sortable: true,
                                dataIndex: 'C1'
                            }]),
                            autoExpandColumn: 'C1',
                            deferRowRender: true,
                            store: new Ext.data.JsonStore({
                                url: 'store1.json',
                                baseParams: {
                                    session_id: '11C2F00E151E303E',
                                    token: 'T190AD94A173F961E'
                                },
                                id: 'store-57222.7',
                                root: 'rows',
                                autoLoad: true,
                                totalProperty: 'count',
                                successProperty: 'success',
                                fields: ['id', 'sel', 'C1', 'C2', 'action1', 'action2', 'actionQtip1', 'actionQtip2', 'actionHide1', 'actionHide2']
                            })
                        }]
                    }]
                },
                {
                    labelWidth: '380',
                    layout: 'form',
                    title: 'Your settings'
                },
                {
                    labelWidth: '380',
                    layout: 'form',
                    title: 'Administration'
                }]
            },
            {
                region: 'south',
            }]
        });
    }
    Can someone please provide either a fix for this (am I missing a property in the config?) or a workaround. I can't change the structure of the config (so removing the 'empty-container' panel isn't a solution) but I can add or remove config properties as needed.

    Thanks,
    Allistar.

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

      0  

    Default


    Why have you put the Grid inside an "empty container"?? Why would you do such a thing?

    Anyway, try not rendering the west region collapsed.

    Instead collapse it programatically on first afterlayout firing on the Viewport.

  3. #3
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Why have you put the Grid inside an "empty container"?? Why would you do such a thing?
    The config is generated from a soft coded structure on the server side and the "empty" container represents a container in the structure that will later have actions performed on it (e.g. have some of it's state altered, or to append to it or empty it), so it is given a specific id that can be found later on. So while the container has only a single child (the grid), it serves a very important purpose in the role of this web application.

    Quote Originally Posted by Animal View Post
    Anyway, try not rendering the west region collapsed.

    Instead collapse it programatically on first afterlayout firing on the Viewport.
    I'll try that and see if it makes a difference, but ideally I would like a solution that doesn't requires such workarounds. Is there a reason why the table is not rendered properly in this situation?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    But the empty-container should still be sized (anchor:'0'?) and have a layout itself (layout:'anchor'?).
    The grid can then have anchor:'0' instead of the (unsupported) width:'100%'.

  5. #5
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default


    Thanks - I had limited success with setting the parent container of the grid to use an 'anchor' layout, but upon making that change on the server side of our applicaition it still was not working as expected. The only difference I can see is that there is an additional parent container between the expanding panel and the grid.

    I have put an example of this online, here:

    http://silvermoonsoftware.co.nz/test/index.html

    And here:

    http://silvermoonsoftware.co.nz/test/index2.html

    In the first link you can see the problem: open up the west panel and the table column is not expanded to take up the remaining width of the table. The only difference with the second link is that the 'collapsed' property for the panel is set to 'false' instead of 'true'.

    I tried setting the panel to be expanded on page load and then collapse it on 'afterlayout' but that did not fix the issue (the grid column didn't take up the full width). Also it caused an obvious visual effect (the user would see the panel collapse before there, which would be disconcerting).

    Can anyone provide a reason or workaround for this issue? Note that setting the containers to have an 'anchor' layout doesn't fix it in this situation.

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

      0  

    Default


    Accordion items are not given an explicit width, so there is no width for the columns to take up.

    I posted a report about this wondernig why the devs didn't anchor accordion items to the width of the container, but that's just the way it works.

    You could write an override to AccordionLayout

  7. #7
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default


    Thanks - even if I change the accordion to be an 'anchor' layout, the same issue occurs. This doesn't seem to be related to the 'accordion' layout - it seems more to be about how the layout manager for the grid component calculates widths when a panel is collapsed. I'll keep investigating this issue and will report back if I find a solution.

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

      0  

    Default


    Show your code. Configuring a "west" region as layout:'anchor', and the grids within it as anchor: '100%', coupled with rendering expanded, and collapsing after the first layout should work.

  9. #9
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Show your code.
    http://silvermoonsoftware.co.nz/test/index3.html

    The code for this is:

    Code:
        page = new Ext.Viewport({
            border: false,
            cls: 'body',
            layout: 'border',
            items: [{
                border: false,
                labelWidth: '380',
                layout: 'form',
                region: 'north',
            },
            {
                id: 'T17BCB04964D994CB',
                autoScroll: true,
                baseCls: 'body',
                border: true,
                labelWidth: 380,
                layout: 'form',
                region: 'center',
                xtype: 'form',
            },
            {
                border: true,
                collapsed: true,
                collapsible: true,
                labelWidth: '380',
                layout: 'anchor',
                margins: '0 0 0 5',
                region: 'west',
                split: true,
                title: 'Side panel',
                width: 450,
                items: [{
                    anchor: '0',
                    labelWidth: '380',
                    layout: 'anchor',
                    title: 'Process queue',
                    items: [{
                        id: 'T1CC1033943BAA1EE',
                        anchor: '0',
                        layout: 'anchor',
                        items: [{
                            anchor: '0',
                            layout: 'anchor',
                            items: [{
                                id: 'T0F1C1A4D7E02BCFA',
                                autoHeight: true,
                                border: false,
                                viewConfig: {
                                    forceFit: true
                                },
                                xtype: 'grid',
                                anchor: '0',
                                stripeRows: true,
                                disableSelection: true,
                                plugins: [new Ext.ux.grid.RowActions(this, {
                                    header: '',
                                    actions: [{
                                        iconIndex: 'action1',
                                        qtipIndex: 'qtip1',
                                        hideIndex: 'hide1',
                                        tokenIndex: 'actiontoken1'
                                    },
                                    {
                                        iconIndex: 'action2',
                                        qtipIndex: 'qtip2',
                                        hideIndex: 'hide2',
                                        tokenIndex: 'actiontoken2'
                                    }]
                                })],
                                colModel: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                                    header: 'Name',
                                    id: 'C1',
                                    align: 'left',
                                    sortable: true,
                                    dataIndex: 'C1'
                                },
                                this.rowActions]),
                                autoExpandColumn: 'C1',
                                deferRowRender: true,
                                store: new Ext.data.JsonStore({
                                    url: 'store1.json',
                                    baseParams: {
                                        session_id: '1AF21CBE0D3D0BC4',
                                        token: 'T0C2919CD5E5CE7F7'
                                    },
                                    id: 'store-57222.11',
                                    root: 'rows',
                                    autoLoad: true,
                                    totalProperty: 'count',
                                    successProperty: 'success',
                                    fields: ['id', 'sel', 'C1', 'action1', 'qtip1', 'hide1', 'actiontoken1', 'action2', 'qtip2', 'hide2', 'actiontoken2']
                                })
                            }]
                        }]
                    }]
                },
                {
                    labelWidth: '380',
                    layout: 'form',
                    title: 'Your settings'
                },
                {
                    labelWidth: '380',
                    layout: 'form',
                    title: 'Administration'
                }]
            },
            {
                border: false,
                region: 'south',
            }]
        });
    Quote Originally Posted by Animal View Post
    Configuring a "west" region as layout:'anchor', and the grids within it as anchor: '100%', coupled with rendering expanded, and collapsing after the first layout should work.
    Yes, this does work, but the user can see the west region collapsing just after the page has loaded. I'll look at extending either the layout manager or the grid itself to force it to have the correct width once it has loaded.

  10. #10
    Touch Premium Member allistar's Avatar
    Join Date
    May 2008
    Location
    Mount Maunganui, Bay of Plenty, New Zealand
    Posts
    42
    Vote Rating
    0
    allistar is on a distinguished road

      0  

    Default


    I am now a lot closer to a solution to this.

    On the 'expand' event for the collapsable panel if I call this:

    Code:
    expand: function() {Ext.getCmp('the-grid').getView().fitColumns(false, false, 0);}
    the grid is now displayed as required. It seems to me that this should ideally be standard functionality (i.e. when a panel is expanded the children of that panel are told about this so they can be relaid out as appropriate). During my debugging (by adding console.log statements to ext-all-debug.js) I can see that GridView.getColumnWidth is returning a much smaller number when the parent panel is collapsed that when it is expanded.

    I will wrap this functionality up into a plugin for the Panel class and get it to auto refresh all child grids components.

Thread Participants: 2