You found a bug! We've classified it as EXTJS-9254 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    133
    Vote Rating
    6
    benjamineberle is on a distinguished road

      0  

    Default 4.2 grid layout breaks with missing width/height

    4.2 grid layout breaks with missing width/height


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.2.1 rev 687
    Browser versions tested against:
    • Chrome 25
    Description:
    • When not specifying the gridpanel width, it used to snap to the sum of the default/preset size of the columns. Since 4.2 the grid just disappears, breaking the internal layout of the parent component with it.
    Steps to reproduce the problem:
    • Just take any grid sample (in my case nested in a panel) and remove width & height.
    The result that was expected:
    • width & height build up from the child components
    The result that occurs instead:
    • grid disappears, no error code
    Test Case:
    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
        id: 'vp',
        layout: {
            type: 'vbox',
            align: 'left',
            pack: 'start'
        },
        
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Add Grid',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        },
    
        onButtonClick: function(button, e, eOpts) {
            Ext.getCmp('vp').add({
                xtype: 'gridpanel',
                title: 'Simpsons',
                columns: [
                { text: 'Name',  dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone' }
                ],
                store: Ext.create('Ext.data.Store', {
                    storeId:'simpsonsStore',
                    fields:['name', 'email', 'phone'],
                    data:[
                        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                    ]
                })
            });
        }
    
    });
    
    Ext.onReady(function() {
        Ext.create('MyApp.view.MyViewport');
    })

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    With your test case code, I get see the grid in Chrome. From what I understand I shouldn't see it correct?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,163
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Note there's a problems with your test case, data should just be an array.

    Once I correct that:
    Attached Images
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    133
    Vote Rating
    6
    benjamineberle is on a distinguished road

      0  

    Default


    In the test case, you have to remove the "width: 400" from the grid to see the problem.

    Data should be irrelevant. I just tested it with the working data array and get the same problem. At least in 4.1 it is possible to render a grid without having a store.

  5. #5
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,810
    Vote Rating
    133
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default


    Why do you wrap the grid with an extra panel, does it fill any purpose?

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,163
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I'm surprised this didn't cause a layout failure in 4.1.x, because it never really supported sizing where docked items are larger than the body.

    Anyway:

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
        layout: {
            type: 'border'
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [{
                    xtype: 'toolbar',
                    region: 'north',
                    items: [{
                        xtype: 'button',
                        text: 'Add Grid',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }]
                }, {
                    xtype: 'tabpanel',
                    region: 'center',
                    itemId: 'canvas',
                    tabPosition: 'bottom'
                }]
            });
    
            me.callParent(arguments);
        },
    
        onButtonClick: function(button, e, eOpts) {
            Ext.ComponentQuery.query('#canvas')[0].add({
    
                xtype: 'panel',
                title: 'test',
                layout: {
                    type: 'vbox'
                },
                items: [{
                    shrinkWrapDock: true,
                    xtype: 'gridpanel',
                    title: 'Simpsons',
                    columns: [{
                        text: 'Name',
                        dataIndex: 'name'
                    }, {
                        text: 'Email',
                        dataIndex: 'email',
                        flex: 1
                    }, {
                        text: 'Phone',
                        dataIndex: 'phone'
                    }],
                    store: Ext.create('Ext.data.Store', {
                        storeId: 'simpsonsStore',
                        fields: ['name', 'email', 'phone'],
                        data: [{
                            'name': 'Lisa',
                            "email": "lisa@simpsons.com",
                            "phone": "555-111-1224"
                        }, {
                            'name': 'Bart',
                            "email": "bart@simpsons.com",
                            "phone": "555-222-1234"
                        }, {
                            'name': 'Homer',
                            "email": "home@simpsons.com",
                            "phone": "555-222-1244"
                        }, {
                            'name': 'Marge',
                            "email": "marge@simpsons.com",
                            "phone": "555-222-1254"
                        }]
                    })
                }]
    
            });
        }
    });
    
    Ext.onReady(function() {
    
        new MyApp.view.MyViewport();
    
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    133
    Vote Rating
    6
    benjamineberle is on a distinguished road

      0  

    Default


    I have streamlined my test case to illustrate the issue better.

    1. This happens when using a vbox/hbox layout without stretching.
    2. In 4.1, the layout did not break.
    3. Adding shrinkWrapDock: true helps, but the layout is still broken (FF & Chrome). Now the gridpanel header shrink wraps to the title, not the containing columns. In Chrome, the columns do not align to the titles (works in FF, though). Only after manually resizing any column width, Chrome aligns title & column.

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
        id: 'vp',
        layout: {
            type: 'vbox',
            align: 'left',
            pack: 'start'
        },
        
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Add Grid',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        },
    
        onButtonClick: function(button, e, eOpts) {
            Ext.getCmp('vp').add({
                xtype: 'gridpanel',
                title: 'Simpsons',
                shrinkWrapDock: true,
                //width: 400,
                columns: [
                { text: 'Name',  dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone' }
                ],
                store: Ext.create('Ext.data.Store', {
                    storeId:'simpsonsStore',
                    fields:['name', 'email', 'phone'],
                    data:[
                        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                    ]
                })
            });
        }
    
    });
    
    Ext.onReady(function() {
        Ext.create('MyApp.view.MyViewport');
    })

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,163
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I don't see any issue. I run the same code in 4.1.1a and 4.2.0 and I see the same result.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    133
    Vote Rating
    6
    benjamineberle is on a distinguished road

      0  

    Default


    Here is what I get in Chrome running that same code with shrinkWrapDocked=true and no width specified:

    Picture1.png

    After resizing the email column width by dragging the border:

    Picture2.png

    Are you saying this sort of sizing is not supported and I was just lucky it worked before?
    Are the column bodies docked in the gridpanel so I have to use shrinkWrapDocked?

    Thanks!

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,163
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Using your test case:

    http://screencast.com/t/xYAMuKJqAO6U

    Seems like something else is going on...
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!