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

Question

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

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

还注意到在 sencha forums 1和2上提出了同样的问题。

这也无济于事：如何在 Ext.grid.ColumnModel 中以百分比设置宽度？

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

Extjs 高手请解释一下！

Answer 1

您链接到的另一个 SO 问题与 Ext 的先前版本有关，而不是 Ext 4。该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"
        }]
    }
});