Extjs : Grid column width in percentage

Question

看来我不是唯一遇到这种情况的人。

我需要在 gridpanel 中设置列​​的宽度以百分比为单位，以便在任何大小(由于调整大小)上，每列都具有预定义的百分比宽度。我无法通过设置 width : 'XY%' 来实现这一点在每一列上。

还注意到sencha 论坛上也有人在问同样的问题1和 2 .

这也没有帮助:How to set width in Ext.grid.ColumnModel in percentage terms?

注意:我不想调整列，但想设置百分比。

Extjs 大师请说明一下!

Answer 1

您链接的另一个 SO 问题与 Ext 的先前版本有关，而不是 Ext 4。flex option 确实是您要寻找的...您不仅限于使用整数设置它，并且弯曲列的宽度将尊重它们的 flex 值之间的比率。

此外，您可以使用 100 的分数来明确表达百分比的概念。

下面是一个例子:

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": "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"
        }]
    }
});