Javascript 带复合字段的ExtJS自动宽度布局

使用ExtJS 4.2.1，我试图将一个“复合”控件添加到我的

表单

面板中，该面板由

文本字段

和旁边的

按钮

组成（该按钮将调用查找对话框）。 我已经按照如下方式实现了这一点：

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'
            }]
        }]

    });


});

我的问题是在布局方面。我希望“bar”文本字段缩小/增大，以填充表单的可用宽度，但它当前在固定宽度处达到最大值，即使“foo”文本字段正确地扩展到表单的宽度

请告知正确的布局设置？

---

只需将flex:1添加到您的工具栏文本框配置中即可。由于它是由hbox布局管理的，因此需要告知项目尽可能多地填充空间（宽度）