Extjs:网格列宽度百分比

时间:2013-08-26 03:59:11

标签: extjs extjs4 extjs4.1 extjs4.2

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

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

还注意到在sencha论坛12上提出了同样的问题。

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

注意:我不想弯曲列,但想设置百分比。

Extjs大师请光一点!

1 个答案:

答案 0 :(得分:6)

你链接到的另一个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"
        }]
    }
});