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

Question

使用ExtJS 4.2.1我正在尝试向我的Form面板添加一个“复合”控件，该控件由旁边的textfield和button组成（将调用查找对话框）。 我已经实现了如下：

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'文本字段正确地跨越表单的宽度

请告知正确的布局设置？ jsFiddle

Answer 1

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