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
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

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

    [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
    16,921
    Vote Rating
    632
    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


    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
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


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

Thread Participants: 1