Extjs : Grid column width in percentage

Question

Looks I am not the only one who has run into this situation.

I need to set the widths of the columns in a gridpanel in percentages so that on any size (due to resizing) each column has the predefined percentage width. I am not able to achieve this by setting width : 'XY%' on each column.

Also noticed that the same question is being asked on sencha forums 1 and 2.

This didn't help either : How to set width in Ext.grid.ColumnModel in percentage terms?

Note : I donot want to flex the columns, but want to set percentages.

Extjs gurus please shed some light!

Answer 1

The other SO question you've linked to relates to a previous version of Ext, not Ext 4. The flex option is really what you're looking for... You're not limited to set it with integers, and flexed columns width will respect the ratio between their flex value.

Furthermore, you can explicitly convey the idea of percentage by using a fraction of 100.

Here's an example:

Ext.create('Ext.grid.Panel', {
    title: "Resize me!",
    // Ratios will be kept when the grid is resized.
    resizable: true,
    columns: {
        // If you want to guarantee that your columns will keep
        // the given ratios, you must prevent the user from
        // resizing them.
        defaults: {
            resizable: false
        },
        items: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 25 / 100
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 25 / 100
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 50 / 100
        }]
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    store: {
        fields: ['name', 'email', 'phone'],
        data: [{
            'name': 'Lisa',
            "email": "[email protected]",
            "phone": "555-111-1224"
        }, {
            'name': 'Bart',
            "email": "[email protected]",
            "phone": "555-222-1234"
        }, {
            'name': 'Homer',
            "email": "[email protected]",
            "phone": "555-222-1244"
        }, {
            'name': 'Marge',
            "email": "[email protected]",
            "phone": "555-222-1254"
        }]
    }
});