extjs hbox लेआउट के लिए ऑटो ऊंचाई कैसे सेट करें?

Question

मैं इस लेआउट है और एक बार im कुछ डेटा सेट करने गतिशील लेआउट आकार बदलने नहीं करता है और अंतिम परिणाम की तरह है इस

इस

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

इस, मैं सिर्फ का उपयोग कर कोड im है परीक्षण

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

किसी भी विचार को ठीक करने के तरीके के रूप में फ़ील्ड प्रदर्शित करने के लिए डेटा सेट करने के लिए उपयोग किया जाता है?

ठीक है तुम प्रदर्शन fieldset की सामग्री के सेट करने के बाद:

सादर

Answer 1

सबसे पहले, इस त्वरित हैक कि ऑटो के लिए छोड़ दिया सामग्री की लंबाई से विस्तार पर अपने fieldset कर देगा है , ऐसा करते हैं: jsfiddle

: ज्यादा संशोधन के बिना

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

, इस उदाहरण है

अतिरिक्त नोट (query सभी घटकों कि, 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 के बाद से हटा दिया गया है और इसलिए इसे आपकी कॉन्फ़िगरेशन में अनदेखा कर दिया गया है। ऑटोमेट मैन्युअल रूप से बनाने के लिए आपको शायद setHeight('auto') का उपयोग करने की आवश्यकता है।

संपादित

column लेआउट का उपयोग कर setHeight('auto') का उपयोग किए बिना एक ही प्रभाव प्राप्त कर सकते हैं की तरह लगता है। Check out the fiddle here।

चीयर्स!