具有复合字段的ExtJS自动宽度布局

Question

Using ExtJS 4.2.1 I'm trying to add a 'composite' control to my Form Panel that consists of a textfield and a button next to it (which will invoke a lookup dialog). I've implemented this as follows:

Ext.onReady(function () {

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        defaults:{
            anchor:'100%',
            border: 0
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'foo'
        }, {
            xtype: 'panel',
            layout:'hbox',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'bar' 
            }, {
                text: '...',
                xtype: 'button'
            }]
        }]

    });


});

The problem I have is in terms of Layout. I want the 'bar' textfield to shrink/grow to fill the available width of the form, but it's currently maxing out at a fixed width, even when the 'foo' textfield extends correctly across the width of the form

Please advise the correct layout settings? jsFiddle

Answer 1

Just add flex:1 to your bar text box config. As its being managed by a hbox layout this is required to tell the item to fill up as much space (width) as possible