Extjs：以百分比表示的网格列宽

Question

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

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

还注意到在煎茶论坛1 和2 上提出了同样的问题。

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

注意：我不想弯曲列，但想设置百分比。

Extjs 大师请赐教！

Answer 1

您链接到的另一个 SO 问题与 Ext 的先前版本有关，而不是 Ext 4。flex 选项确实是您正在寻找的...您不限于用整数设置它, 和 flexed 列的宽度将遵循它们的 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"
        }]
    }
});