Question

136

How to set auto height for extjs hbox layout?

rated 0 times [ 139] [ 3] / answers: 1 / hits: 26135 / 13 Years ago, thu, july 28, 2011, 12:00:00

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

issue

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breonnamayah

Add To Favorites

Follow

Total Points: 574

Total Questions: 115

Total Answers: 96

Location: England

Member since Sun, May 21, 2023

1 Year ago

breonnamayah questions

1 JSX element type 'x' does not have any construct or call signatures

Sun, Nov 14, 21, 00:00, 3 Years ago

1 How do i add items to my cart using javascript?

Sun, Oct 31, 21, 00:00, 3 Years ago

1 How can i get index use forEach loop?

Thu, Jun 3, 21, 00:00, 3 Years ago

1 Unexpected unhandledRejection event for promise which rejection does get handled

Tue, Oct 13, 20, 00:00, 4 Years ago

1 React: How to combine each multiple styles marked in Material-UI

Mon, Mar 16, 20, 00:00, 4 Years ago

View All

answered 13 Years ago oliverkarle · Accepted Answer

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:

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.

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!