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

먼저이 자동으로 왼쪽이 내용의 길이에 의해 확장에 필드 셋을 만들 것입니다 빠른 해킹 이 수행 jsfiddle

: 많은 수정없이

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

을, 이것은 예입니다

추가 참고 (query는 CSS 선택기처럼, Ext.Component을 상속 아래 항목을 조회 할 모든 구성 요소에 글로벌 방법을 사용할 수있다) 몇 가지

참고 사항 :

1. align:'stretch'을 사용하려면 구성 요소에 직접 구성으로 제공 할 수 없으므로 다음을 수행해야합니다.

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

   check out this testing demo이 필요합니다. 첫 번째 창은 예상대로 작동하지만 두 번째 및 세 번째 창은 패널을 늘리지 못합니다.

2. 두 번째로, autoHeight은 ExtJS 4 이후 삭제되었으므로 구성에서 무시됩니다. 수동으로 autoHeight를 만들려면 setHeight('auto')을 사용해야 할 수도 있습니다.

EDIT

는 setHeight('auto')를 사용하지 않고 동일한 효과를 얻을 수 column 레이아웃을 사용하는 것과 같다. Check out the fiddle here.

건배!