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

How to set auto height for extjs hbox layout?

提问by Gihan Lasita

i have this layout and once im setting some data dynamically layout doesn't resize and final result is like this

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

this is the code im using

这是我使用的代码

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();

this, i just used for setting data to display fields as test

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

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

any idea how to fix this ?

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

Regards

问候

采纳答案by Lionel Chan

First of all, this is the quick hack that will make your fieldset on the left to auto expand by the length of the content:

首先，这是一个快速的技巧，可以让你在左边的字段集自动扩展内容的长度：

Right after you set the content of the display fieldset, do this:

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

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

Without much modification, this is the example: jsfiddle

没有太多修改，这是示例：jsfiddle

(queryis a method available global to all the components that inherit Ext.Component, to query the items underneath, like css selectors)

（query是所有继承的组件都可用的全局方法Ext.Component，用于查询下面的项目，如 css 选择器）

Extra Note

额外注意

A few things to note:

需要注意的几点：

1. To use align:'stretch', you can't provide it as a direct configuration to the component, you will need to do this:

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

   You will want to check out this testing demo. First window will work as expected, while second and third window fails to stretch the panels.

2. Secondly, autoHeighthas been dropped since ExtJS 4 and so it's ignored in your configuration. You probably need to use the setHeight('auto')to make it autoHeight manually.

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

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

   您将需要查看此测试演示。第一个窗口将按预期工作，而第二个和第三个窗口无法拉伸面板。

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

EDIT

编辑

Seems like using columnlayout can achieve same effect without using setHeight('auto'). Check out the fiddle here.

似乎使用columnlayout 可以达到同样的效果，而无需使用setHeight('auto'). 在这里查看小提琴。

Cheers!

干杯!