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

[burnnat]

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:

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:

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:

• Screenshot of second test case:
  grid-checkbox-flex.PNG

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

[evant]

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.

[burnnat]

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