How do I make multiple components within a Container inherit the Container's computed width?

Question

Here is a Sencha fiddle of my tab panel setup. Buttons are dynamically added to a vbox tabs container that is part of an hbox layout setup. The tabs container's width is determined by the flex property.

I've tried setting every button's width: '100%', but upon looking at the Sencha docs on button.width, I find that width takes an integer value representing pixels. I've tried setting the width in style, but I've only succeeded in making the button's width be the width of the screen.

Help and an explanation of the underlying CSS concepts would be greatly appreciated

Answer 1

You're looking for the stretchmax option.

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