How to set auto height for extjs hbox layout?

Question

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

Answer 1

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

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

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, autoHeight has 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.

EDIT

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

Cheers!