Results 1 to 3 of 3

Thread: [4.1b2] Unable to mix flex/width configs for grid columns in Firefox

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5293 in a recent build.
  1. #1
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    64
      0  

    Default [4.1b2] Unable to mix flex/width configs for grid columns in Firefox

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1b2


    Browser versions tested against:
    • FF10
    • IE8
    • Chrome 16


    Description:
    • The documentation for grid columns states that "The columns are laid out by a Ext.layout.container.HBox layout, so a column can either be given an explicit width value or a flex configuration". However, when column with a flex configuration that is hidden by default is first shown, if the grid also contains columns with fixed widths, the grid body is not properly updated. This was first encountered with the fixed-width checkbox column on grids that use a checkbox selection model, but it holds true of any grid with both fixed-width and flex columns. Testing in Firefox, IE8 and Chrome reveals that this problem is specific to Firefox.


    Steps to reproduce the problem:
    • Create a grid with a mix of columns with fixed width and flex configurations
    • Set one of the columns with a flex config to be hidden by default
    • Use the column header menu to show the hidden column


    The result that was expected:
    • The column should appear with the data for that column below it in the grid


    The result that occurs instead:
    • The column header appears, but the data for that column is not rendered in the grid body


    Test Case:

    With "normal" columns:
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"  },
            { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name', width: 100 },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone', flex: 1, hidden: true }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    With checkbox selection model column:
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"  },
            { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        selType: 'checkboxmodel',
        columns: [
            { header: 'Name',  dataIndex: 'name', flex: 1 },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone', flex: 1, hidden: true }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    Screenshot:


    HELPFUL INFORMATION

    Debugging already done:
    • This bug is unique to Firefox; IE8 and Chrome both render without a problem.
    • This problem is only present on the first time the column is shown in the grid. Subsequent hide/show actions on the column appear to work as expected.


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Win7

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

    Default

    This seems to be a bug introduced in the new FF version. I tested it against b1/b2 and the problem didn't show up. I went to check the version (9) and it prompted me to update. After updating, the bug was apparent as described.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    64
      0  

    Default

    Ah, interesting! Didn't realize this was only true of the most recent Firefox... thanks for your investigation, evant!

Posting Permissions

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