Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default [FIXED-EXTJSIV-1550] [B3] Another Layout/Grid Issue

    [FIXED-EXTJSIV-1550] [B3] Another Layout/Grid Issue


    I know the example is a little convoluted but it only seems to occur if you have grids on multiple cards in a card layout. To duplicate the issue click 'Show Tab' and then 'Show Grid 2'.

    Notice that the second grid does not render the data items. It will not render them until you resize the window.

    Code:
          Ext.onReady (function () {
                Ext.regModel ('testModel', { fields: [ 'x' ] });
                Ext.create ('Ext.container.Viewport', {
                   layout: 'border',
                   items: [{
                      region: 'north',
                      xtype: 'toolbar',
                      items: [{
                         text: 'Show Tab',
                         handler: function () {
                            var panel = Ext.getCmp ('tabPanel');
                            panel.add ({
                               xtype: 'panel',
                               id: 'panel1',
                               title: 'Tab 1',
                               layout: { type: 'card' },
                               activeItem: 'gridCard1',
                               dockedItems: [{
                                  dock: 'top',
                                  xtype: 'toolbar',
                                  items: [{
                                     text: 'Show Grid 1',
                                     handler: function () {
                                        var panel = Ext.getCmp ('panel1');
                                        panel.getLayout ().setActiveItem ('gridCard1');
                                     }
                                  }, {
                                     text: 'Show Grid 2',
                                     handler: function () {
                                        var panel = Ext.getCmp ('panel1');
                                        panel.getLayout ().setActiveItem ('gridCard2');
                                     }
                                  }]
                               }],
                               items: [{
                                  xtype: 'container',
                                  id: 'gridCard1',
                                  layout: { type: 'hbox', align: 'stretch', padding: 5 },
                                  items: {
                                     xtype: 'grid',
                                     flex: 1,
                                     columns: [{ text: 'column 1', dataIndex: 'x' }],
                                     store: Ext.create ('Ext.data.Store', { 
                                        model: 'testModel',
                                        data: [
                                           { x: 1 },
                                           { x: 2 },
                                           { x: 3 }
                                        ]
                                     })
                                  }
                               }, {
                                  xtype: 'container',
                                  id: 'gridCard2',
                                  layout: { type: 'hbox', align: 'stretch', padding: 5 },
                                  items: {
                                     xtype: 'grid',
                                     flex: 1,
                                     columns: [{ text: 'column 1', dataIndex: 'x' }],
                                     store: Ext.create ('Ext.data.Store', { 
                                        model: 'testModel',
                                        data: [
                                           { x: 4 },
                                           { x: 5 },
                                           { x: 6 }
                                        ]
                                     })
                                  }
                               }]
                            });
                         }
                      }]
                   }, {
                      xtype: 'tabpanel',
                      id: 'tabPanel',
                      region: 'center'
                   }]
                });
             });

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default Workaround

    Workaround


    Since our app has many grids inside card layouts (some in tabs, some in wizards and some in our own custom card switcher) and this issue is basically breaking most all of them I've had to track down a workaround for this. I figured I'd post the workaround here in hopes that it a) helps others with the issue and b) helps the developers figure out the problem.

    The workaround is to add an activate listener on the card containing the grid and call "afterFirstLayout" on the grid from there.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    20
    Vote Rating
    1
    chrisbrianolsen is on a distinguished road

      0  

    Default Same problem here

    Same problem here


    I am running into the same problem here. I have multiple grids in an hbox that is contained in a vbox.
    The grids size are all messed up until the browser window is resized.
    I also see these errors on the firebug console which I believe are related:

    Unexpected value undefined parsing width attribute.
    Unexpected value undefined parsing height attribute.

    This behavior started with Beta 1, previously it was working fine.

    Thanks
    -- Chris

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Thanks for the bug report. We are looking into it.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    Aaron,

    I believe I am having similar grid issues when residing within tabpanels. I posted a bug in the 4.0 forum and included all of the code and instructions on how to reproduce it. For some reason it was moved to the Help forums. I would appreciate it if you could at least try this self-contained example out and see if you can reproduce the behavior with Beta 3. You guys do really great work!

    Here are the instructions on how to reproduce the bug:
    1. Click the Hardware Tab at the top.
    2. Click the Recips Tab (below the Orders grid).
    3. Select the second order in the Orders grid
    4. Click on the Items Tab (below the Orders grid)
    5. Click on the first order in the Orders grid.


    Here is the code:

    Code:
    Ext.onReady(function () {
    
        // Define the Order Model and it's associations
        Ext.regModel('Order', {
            fields: [{
                name: 'Id',
                type: 'int'
            }, {
                name: 'Name',
                type: 'string'
            }, {
                name: 'Description',
                type: 'string'
            }],
            hasMany: [{
                model: 'OrderItem',
                name: 'orderitems'
            }, {
                model: 'OrderRecipient',
                name: 'orderrecipients'
            }]
        });
    
        // Define the Order Item Model
        Ext.regModel('OrderItem', {
            fields: [{
                name: 'Id',
                type: 'int'
            }, {
                name: 'Name',
                type: 'string'
            }, {
                name: 'Description',
                type: 'string'
            }],
            belongsTo: 'Order'
        });
    
        // Define the Order Recipient Model
        Ext.regModel('OrderRecipient', {
            fields: [{
                name: 'Id',
                type: 'int'
            }, {
                name: 'Name',
                type: 'string'
            }, {
                name: 'Description',
                type: 'string'
            }],
            belongsTo: 'Order'
        });
    
        var myData = {
            orders: [
                {
                    Id: 1,
                    Name: 'Order 1',
                    Description: 'Order 1 Desc',
                    orderrecipients:
                    [
                        {
                            Id: 1,
                            Name: 'Order 1 Recip 1',
                            Description: 'Order 1 Recip 1 Desc'
                        }
                    ]
                },
                {
                    Id: 2,
                    Name: 'Order 2',
                    Description: 'Order 2 Desc',
                    orderitems:
                    [
                        {
                            Id: 1,
                            Name: 'Order 2 Item 1',
                            Description: 'Order 2 Item 1 Desc'
                        },
                        {
                            Id: 2,
                            Name: 'Order 2 Item 2',
                            Description: 'Order 2 Item 2 Desc'
                        },
                        {
                            Id: 3,
                            Name: 'Order 2 Item 3',
                            Description: 'Order 2 Item 3 Desc'
                        },
                        {
                            Id: 4,
                            Name: 'Order 2 Item 4',
                            Description: 'Order 2 Item 4 Desc'
                        },
                        {
                            Id: 5,
                            Name: 'Order 2 Item 5',
                            Description: 'Order 2 Item 5 Desc'
                        },
                        {
                            Id: 6,
                            Name: 'Order 2 Item 6',
                            Description: 'Order 2 Item 6 Desc'
                        },
                        {
                            Id: 7,
                            Name: 'Order 2 Item 7',
                            Description: 'Order 2 Item 7 Desc'
                        },
                        {
                            Id: 8,
                            Name: 'Order 2 Item 8',
                            Description: 'Order 2 Item 8 Desc'
                        },
                        {
                            Id: 9,
                            Name: 'Order 2 Item 9',
                            Description: 'Order 2 Item 9 Desc'
                        },
                        {
                            Id: 10,
                            Name: 'Order 2 Item 10',
                            Description: 'Order 2 Item 10 Desc'
                        },
                        {
                            Id: 11,
                            Name: 'Order 2 Item 11',
                            Description: 'Order 2 Item 11 Desc'
                        },
                        {
                            Id: 12,
                            Name: 'Order 2 Item 12',
                            Description: 'Order 2 Item 12 Desc'
                        },
                        {
                            Id: 13,
                            Name: 'Order 2 Item 13',
                            Description: 'Order 2 Item 13 Desc'
                        },
                        {
                            Id: 14,
                            Name: 'Order 2 Item 14',
                            Description: 'Order 2 Item 14 Desc'
                        },
                        {
                            Id: 15,
                            Name: 'Order 2 Item 15',
                            Description: 'Order 2 Item 15 Desc'
                        },
                        {
                            Id: 16,
                            Name: 'Order 2 Item 16',
                            Description: 'Order 2 Item 16 Desc'
                        },
                        {
                            Id: 17,
                            Name: 'Order 2 Item 17',
                            Description: 'Order 2 Item 17 Desc'
                        },
                        {
                            Id: 18,
                            Name: 'Order 2 Item 18',
                            Description: 'Order 2 Item 18 Desc'
                        },
                        {
                            Id: 19,
                            Name: 'Order 2 Item 19',
                            Description: 'Order 2 Item 19 Desc'
                        }
    
    
                    ],
                    orderrecipients: [
                        {
                            Id: 1,
                            Name: 'Order 2 Recip 1',
                            Description: 'Order 2 Recip 1 Desc'
                        }
                    ]
                }
            ]
        };
    
    
        this.orderStore = new Ext.data.Store({
            autoLoad: false,
            model: 'Order',
            data: myData,
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'orders'
                }
            }
        });
    
        this.orderItemsStore = new Ext.data.Store({
            model: 'OrderItem',
            proxy: {
                type: 'ajax',
                url: 'getdata.aspx?operation=loadQuote',
                reader: {
                    type: 'json',
                    root: 'orderitems'
                }
            },
            autoLoad: false
        });
    
        this.orderRecipientsStore = new Ext.data.Store({
            model: 'OrderRecipient',
            proxy: {
                type: 'ajax',
                url: 'getdata.aspx?operation=loadQuote',
                reader: {
                    type: 'json',
                    root: 'orderrecipients'
                }
            },
            autoLoad: false
        });
    
        var vp = Ext.create('Ext.container.Viewport', {
            layout: 'border',
            renderTo: Ext.getBody(),
            items: [{
                region: 'center',
                xtype: 'tabpanel',
                plain: true,
                activeTab: 0,
                items: [{
                    layout: 'fit',
                    title: 'Q 1',
                    items: [{
                        xtype: 'tabpanel',
                        flex: 2,
                        border: false,
                        plain: true,
                        items: [{
                            xtype: 'panel',
                            layout: 'fit',
                            title: 'Customer Info',
                            html: 'customer info goes here'
                        }, {
                            title: 'Hardware',
                            layout: {
                                type: 'vbox',
                                align: 'stretch'
                            },
                            items: [{
                                xtype: 'grid',
                                id: 'ordersGrid',
                                title: 'Orders',
                                flex: 2,
                                store: this.orderStore,
                                listeners: {
    
                                    select: {
                                        scope: this,
                                        fn: function (selModel, rec, index) {
    
                                            this.orderItemsStore.loadData(rec.orderitems().data.items, false);
                                            this.orderRecipientsStore.loadData(rec.orderrecipients().data.items, false);
    
                                        }
                                    }
    
                                },
                                columns: [{
                                    xtype: 'gridcolumn',
                                    header: 'Id',
                                    dataIndex: 'Id',
                                    width: 100
                                }, {
                                    xtype: 'gridcolumn',
                                    header: 'Name',
                                    dataIndex: 'Name',
                                    width: 100
                                }, {
                                    xtype: 'gridcolumn',
                                    header: 'Description',
                                    dataIndex: 'Description',
                                    width: 100
                                }],
                                dockedItems: [{
                                    dock: 'top',
                                    xtype: 'toolbar',
                                    items: [{
                                        text: 'Add'
    
    
                                    }, {
    
                                        text: 'Remove'
    
                                    }]
                                }]
                            }, {
                                xtype: 'tabpanel',
                                id: 'detailTabPanel',
                                border: false,
                                flex: 1,
                                items: [{
                                    title: 'Items',
                                    xtype: 'panel',
                                    layout: 'fit',
                                    items: [{
                                        xtype: 'grid',
                                        id: 'orderItemsGrid',
                                        store: this.orderItemsStore,
                                        autoScroll: true,
                                        columns: [{
                                            xtype: 'gridcolumn',
                                            header: 'Id',
                                            dataIndex: 'Id',
                                            width: 100
                                        }, {
                                            xtype: 'gridcolumn',
                                            header: 'Name',
                                            dataIndex: 'Name',
                                            width: 100
                                        }, {
                                            xtype: 'gridcolumn',
                                            header: 'Description',
                                            dataIndex: 'Description',
                                            width: 100
                                        }],
                                        dockedItems: [{
                                            dock: 'top',
                                            xtype: 'toolbar',
                                            items: [{
    
                                                text: 'Add'
    
    
                                            }, {
    
                                                text: 'Remove'
    
                                            }]
                                        }]
                                    }]
                                }, {
                                    title: 'Recips',
                                    xtype: 'panel',
                                    layout: 'fit',
                                    items: [{
                                        xtype: 'grid',
                                        autoScroll: true,
                                        id: 'orderRecipsGrid',
                                        store: this.orderRecipientsStore,
                                        columns: [{
                                            xtype: 'gridcolumn',
                                            header: 'Id',
                                            dataIndex: 'Id',
                                            width: 100
                                        }, {
                                            xtype: 'gridcolumn',
                                            header: 'Name',
                                            dataIndex: 'Name',
                                            width: 100
                                        }, {
                                            xtype: 'gridcolumn',
                                            header: 'Description',
                                            dataIndex: 'Description',
                                            width: 100
                                        }],
                                        dockedItems: [{
                                            dock: 'top',
                                            xtype: 'toolbar',
                                            items: [{
    
                                                text: 'Add'
    
    
                                            }, {
    
                                                text: 'Remove'
    
                                            }]
                                        }]
                                    }]
                                }]
                            }]
                        }, {
    
                            xtype: 'panel',
                            layout: 'fit',
                            title: 'Estimate',
                            html: 'Estimate info goes here'
                        }]
                    }]
                }]
            }, {
                region: 'west',
                title: 'Nav Bar',
                collapsible: false,
                split: false,
                width: 150
            }]
        });
    
    });
    Thanks!

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    This will be fixed in the next release.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    Aaron,

    Will both issues (James and mine) be fixed? I was unable to tell by your reply.

    Thanks Again!

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Yes both of these issues should be fixed, please test in 4.0.0 final, released today to make sure everything is working for you.

    Thanks,
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  9. #9
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    Aaron,

    I have tested with the final release and all seems to work fine. Thank you for getting this fixed!

  10. #10
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Yep, fixed for me as well. Thanks!

Similar Threads

  1. Replies: 1
    Last Post: 26 Apr 2011, 8:59 AM
  2. Replies: 4
    Last Post: 14 Apr 2011, 3:35 PM
  3. [FIXED-EXTJSIV-799]New issue with Numeric/Time axis
    By James Goddard in forum Ext:Bugs
    Replies: 1
    Last Post: 8 Apr 2011, 1:52 PM
  4. Replies: 3
    Last Post: 7 Apr 2011, 5:38 AM
  5. [PR5][FIXED-EXTJSIV-189] ComboBox Selection Issue
    By PV-Patrick in forum Ext:Bugs
    Replies: 8
    Last Post: 22 Mar 2011, 5:26 PM

Thread Participants: 5