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();
    }
});

如何在Container中创建多个组件继承Container的计算宽度？

1 个答案: