javascript - 如何让 Container 中的多个组件继承 Container 的计算宽度？

Question

Here is a Sencha fiddle of my tab panel setup.按钮被动态添加到 vbox 选项卡容器中，该容器是 hbox 布局设置的一部分。选项卡容器的宽度由 flex 属性决定。

我已经尝试设置每个按钮的 width: '100%'，但是在查看 Sencha docs on button.width 时，我发现 width 采用表示像素的整数值。我试过在 style 中设置宽度，但我只成功地使按钮的宽度成为屏幕的宽度。

将不胜感激对底层 CSS 概念的帮助和解释

Answer 1

您正在寻找 stretchmax 选项。

var locationCameraList=[];

Ext.application({
    name : 'Fiddle',

    launch : function() {

        var buttonArr = [];

        for (i = 0; i < locationCameraList.length; ++i) {
            var tabName = locationCameraList[i].location, 
                index = i;
            var tab = {
                xtype: 'button',
                cls: 'tab'+index,
                text: tabName,
                scale: 'medium'

            };
            buttonArr.push(tab);
            console.log(i)
        }

        var forms = {
            xtype: 'container',
            flex: 4,
            layout: 'fit',
            align: 'stretch',
            html: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
        };

        Ext.create('Ext.window.Window', {
            title: 'Foo',
            layout: 'hbox',
            items:[{
                xtype: 'container',
                items: buttonArr,
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretchmax'
                },
                autoScroll: true,
                height: 200
            }, forms]
        }).show();
    }
});