Cómo configurar la altura automática para el diseño extjs hbox?

Question

tengo esta disposición y configuración de una vez im algunos datos dinámicamente diseño no cambia de tamaño y resultado final es como esto

este es el im código utilizando

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

esto, yo sólo utilizado para configurar datos para mostrar campos como prueba

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

¿Alguna idea de cómo solucionar esto?

Saludos

Answer 1

En primer lugar, este es el truco rápido que hará que su conjunto de campos de la izquierda para Expansión automática por la longitud del contenido:

inmediatamente después de establecer el contenido del grupo de campos de visualización , haga lo siguiente:

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

Sin mucha modificación, este es el ejemplo: jsfiddle

(query es un método global disponible para todos los componentes que heredan Ext.Component, para consultar los artículos por debajo, como selectores CSS)

extra Nota

Algunas cosas para tomar nota:

1. Para usar align:'stretch', no puede proporcionarlo como una configuración directa del componente, deberá hacer esto:

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

   Querrá check out this testing demo. La primera ventana funcionará como se esperaba, mientras que la segunda y tercera ventana no pueden estirar los paneles.

2. En segundo lugar, autoHeight se ha caído desde ExtJS 4 por lo que se ignora en su configuración. Probablemente necesite usar el setHeight('auto') para hacerlo autoHeight manualmente.

EDITAR

parece que el uso de column diseño puede lograr mismo efecto sin necesidad de utilizar setHeight('auto'). Check out the fiddle here.

¡Salud!