Extjs:网格列宽度百分比

Question

看起来我不是唯一一个遇到这种情况的人.

我需要以gridpanel百分比形式设置列的宽度,以便在任何大小(由于调整大小)时,每列都具有预定义的百分比宽度.我无法通过设置width : 'XY%'每列来实现此目的.

还注意到在sencha论坛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"
        }]
    }
});