Javascript 如何设置extjs hbox布局的自动高度？

我有这个布局，一旦即时通讯设置一些数据动态布局不调整大小和最终结果是这样的

这是我使用的代码

win = Ext.create('widget.window', {
      title: 'Layout Window',
      closable: true,
      closeAction: 'hide',
      width: 750,
      height: 500,
      layout: 'fit',
      animCollapse: true,
      bodyPadding: 5,

      items: [{
                xtype: 'container',
                layout: 'hbox',
                align: 'stretch',
                items: [{
                          xtype: 'fieldset',
                          flex:1,
                          title: 'Details',
                          margins:'0 5 0 0',
                          layout: 'anchor',                          
                          autoHeight: true,
                          items: [{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Name',
                                    name: 'customer_name',
                                    id: 'customer_name',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'ID Card',
                                    id: 'customer_id',
                                    name: 'customer_id',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Address',
                                    name: 'address',
                                    id: 'address',
                                    width: 300
                                }]                        
                      },{
                          xtype: 'fieldset',
                          title: 'Details',
                          margins:'0 0 5 0',
                          flex:1,
                          layout: 'anchor',
                          autoHeight: true,
                          items: [{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'invoice',
                                    anchor: '98%',
                                    name: 'invoice_number',
                                    id: 'invoice_number',
                                    allowBlank: false,
                                    readOnly: true
                                },{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'Payment Amount',
                                    anchor: '98%',
                                    name: 'payment_amount',
                                    id: 'payment_amount',
                                    allowBlank: false
                                },{
                                    xtype: 'button',
                                    id: 'test'

                                    }]                        
                      }]                        
             }]


}).show();

这个，我只是用来设置数据以显示字段作为测试

Ext.getCmp('test').on('click', function(){
    Ext.getCmp('customer_name').setValue('customer name customer_name customer_name customer_name');
    Ext.getCmp('customer_id').setValue('855');
    Ext.getCmp('address').setValue('some text, some text, some text, some text');
});

你知道怎么解决这个问题吗

---

关于

首先，这是一种快速破解方法，可使左侧的字段集自动扩展内容的长度：

设置显示字段集的内容后，立即执行以下操作：

win.query('fieldset')[0].setHeight('auto');

在没有太多修改的情况下，以下是示例：

（对于继承

Ext.Component

的所有组件来说，是一个全局可用的方法，用于查询下面的项目，如css选择器）

额外注意事项

需要注意的几点：

要使用

align:'stretch'

，您不能将其作为组件的直接配置，您需要执行以下操作：

Ext.create('Ext.panel.Panel', {
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [...]
});

你会想要的。第一个窗口将按预期工作，而第二个和第三个窗口无法拉伸面板

其次，

autoHeight

自extjs4以来已被删除，因此在您的配置中被忽略。您可能需要使用

setHeight（'auto'）

手动设置为autoHeight

编辑

似乎使用

column

布局可以在不使用

setHeight（'auto'）

的情况下实现相同的效果

---

干杯

事实上，这是ExtJS4中的难点之一。有兴趣了解如何在不收听调整大小事件的情况下实现这一点：）谢谢。想知道哪种布局可以使用自动高度支持获得完全相同的输出。尝试了列布局，但无法在两个字段集之间获得空间如果需要空间，您可以将组件的

样式

甚至

主体样式

设置为具有某种css

边距

或

填充

。但列布局似乎不允许这样做。不管怎样，谢谢你的一切。@Gihan为什么不呢。注意，我已经删除了前面提到的hack。你的字段集自动扩展。谢谢：）哦，该死的，我整晚都在检查。我试着用页边空白，似乎我就是在这里搞砸的