javascript - 如何为 extjs hbox 布局设置自动高度？

Question

我有这个布局，一旦我设置了一些数据动态布局就不会调整大小，最终结果是这样的

这是我使用的代码

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');
});

知道如何解决这个问题吗？

问候

Answer 1

首先，这是一个快速技巧，可以让您在左侧的字段集根据内容的长度自动扩展:

在设置显示字段集的内容后，立即执行此操作:

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

无需太多修改，示例如下:jsfiddle

(query 是一种全局可用的方法，可用于所有继承 Ext.Component 的组件，以查询下面的元素，如 css 选择器)

额外说明

一些注意事项:

1. 要使用 align:'stretch'，您不能将其作为直接配置提供给组件，您需要这样做:

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

   你会想 check out this testing demo .第一个窗口将按预期工作，而第二个和第三个窗口无法拉伸(stretch)面板。

2. 其次，autoHeight 自 ExtJS 4 以来已被删除，因此在您的配置中将被忽略。您可能需要使用 setHeight('auto') 手动将其设置为自动高度。

编辑

似乎使用 column 布局可以在不使用 setHeight('auto') 的情况下达到相同的效果。 Check out the fiddle here .

干杯!