extjs4 - 如何在 hbox 布局中拉伸单个元素？

Question

如何告诉 extjs4 在hbox布局中只拉伸一个元素？

例如我有以下布局：

{
    flex: 1,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        flex: 1,
        // GRID, needs to be stretched
    }, {
        // button, don't stretch
    }, {
        // another button, don't stretch
    }]
}

在上面的代码中，所有元素（包括按钮）都被拉伸了。可以在盒子布局中使用吗？

当然，我可以在 hbox 容器中包装按钮，但我不喜欢这种解决方案。

Answer 1

您可以使用的一种解决方法是给按钮 a maxHeight，因为约束总是“获胜”。

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
        width: 400,
        height: 300,
        renderTo: document.body,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            title: 'A panel'
        }, {
            xtype: 'button',
            text: 'B1',
            maxHeight: 25
        }, {
            xtype: 'button',
            text: 'B2',
            maxHeight: 25
        }]
    })
});