具有复合字段的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布局管理的，因此需要告诉项目尽可能多地填充空间（宽度）