Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: 4.2 grid layout breaks with missing width/height

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    208
    Vote Rating
    3
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

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

    Once I correct that:
    Attached Images Attached Images
    Evan Trimboli
    Twitter - @evantrimboli

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    208
    Vote Rating
    3
      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 Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,078
    Vote Rating
    184
      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
    18,608
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    208
    Vote Rating
    3
      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
    18,608
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    208
    Vote Rating
    3
      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
    18,608
    Vote Rating
    874
      0  

    Default

    Using your test case:

    http://screencast.com/t/xYAMuKJqAO6U

    Seems like something else is going on...
    Evan Trimboli
    Twitter - @evantrimboli

Page 1 of 2 12 LastLast

Posting Permissions

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