如何创建具有固定宽度和弹性宽度列的ExtJs仪表板？

Question

在ExtJs6中，我们可以使用以下命令配置列宽：  columnWidths：[0.1,0.7,0.2]， 这将使列占仪表板整个宽度的10％，70％和20％。

但我想让第一列和第三列的宽度固定，中间的列总是左边。

有人有想法吗？

Answer 1

我改用border layout。左侧和右侧区域（西侧和东侧）将被赋予那些固定宽度。中间区域是您的中间区域，默认情况下会占用剩余的所有宽度。

Answer 2

根据Ext.layout.container.Column说明，您可以执行以下操作：

// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.

Ext.create('Ext.Panel', {
    title: 'Column Layout - Mixed',
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: 0.7
    },{
        title: 'Column 3',
        columnWidth: 0.3
    }],
    renderTo: Ext.getBody()
});