[INVALID] Buttons in hbox with flex 1 not calculating width correctly

[estesbubba]

Simple test case - text is being clipped.

Ext.setup({
    onReady: function(options) {
        Ext.Viewport.setActiveItem({
        xtype: 'panel',
        layout: {
            type : 'vbox',
            align: 'middle'
        },


        items: [{
                xtype: 'component',
                html: 'Welcome'
            }, {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                items: [{
                    xtype: 'button',
                    flex: 1,
                    text: 'Phone Number',
                    itemId: 'phoneButton',
                    cls: 'c-button',
                    iconCls: 'action',
                    iconMask: true,
                    iconAlign: 'top'
                }, {
                    xtype: 'button',
                    flex: 1,
                    text: 'Account',
                    itemId: 'accountButton',
                    cls: 'c-button',
                    iconCls: 'action',
                    iconMask: true,
                    iconAlign: 'top'
                }, {
                    xtype: 'button',
                    flex: 1,
                    text: 'Scan Bar Code',
                    itemId: 'scanButton',
                    cls: 'c-button',
                    iconCls: 'action',
                    iconMask: true,
                    iconAlign: 'top'
                }]
            }]
        });
    }
});

[mitchellsimoens]

Thank you for the report.

[Jacky Nguyen]

This is the correct behavior.

Note that in Sencha Touch's Box Layout implementation, when you give a flex number to the items, the ratio are respected. Three items all with flex: 1 means all their sizes are equally divided. If you want an item to have its natural size, simply don't give it a 'flex' config.

[estesbubba]

What I want is all of the buttons to have the same size without clipping. It seems in Ext JS that giving flex: 1 would make all the buttons the same size as the largest one and adjust the container. Does Touch not do the same? The parent container definitely has room to grow.