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

まず第一に、これは自動車の左側のあなたのフィールドセットは、コンテンツの長さによって拡大になります迅速なハックです：

あなたが表示フィールドセットの内容を設定した直後、この操作を行います。多くの変更を加えることなく

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

を、これは一例です：jsfiddle

1. ：注意すべき

   いくつ

   エクストラ注（queryは、CSSセレクタのように、下の項目を照会するために、Ext.Componentを継承するすべてのコンポーネントへのグローバルな利用できる方法です）

   align:'stretch'を使用するには、コンポーネントに直接設定する必要はありません。

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

   あなたはcheck out this testing demoになります。最初のウィンドウは期待どおりに動作し、2番目と3番目のウィンドウはパネルを伸ばすことができません。

2. 第2に、autoHeightはExtJS 4以降に削除されているため、設定では無視されます。手動でautoHeightを作成するには、おそらくsetHeight('auto')を使用する必要があります。

EDIT

はsetHeight('auto')を使用せずに同じ効果を得ることができcolumnレイアウトを使用してのように思えます。 Check out the fiddle here。

乾杯！