ExtJS: कुछ फॉर्म फ़ील्ड्स जोड़ने/निकालने के बाद गतिशील रूप से समायोजित लेआउट

Question

मेरे पास कुछ टेक्स्टफ़िल्ल्ड तत्वों और एक HtmlEditor तत्व के साथ फ़ॉर्म लेआउट है। कुछ टेक्स्टफिल्ल्ड तत्व "छिपाने योग्य" होते हैं, यानी छुपाया जा सकता है या दिखाया जा सकता है। तत्वों को छिपाने/दिखाने के बाद HtmlEditor इंस्टेंस ब्रेक लेआउट - खाली स्थान दिखाई देता है या तत्व विंडो सीमा पर समाप्त नहीं होता है।

क्या एचटीएमएलडिटर उदाहरण को सभी शेष उपलब्ध स्थान का उपयोग करना संभव है? यहां तक ​​कि जब कुछ तत्व छुपा/दिखाए जाते हैं।

मैंने anchor संपत्ति का उपयोग करने का प्रयास किया है, लेकिन यह लेआउट से हटाए गए कुछ तत्वों तक ठीक से काम करता है।

var htmlEditor = new Ext.form.HtmlEditor({ 
    anchor: '100% -54', 
    hideLabel: true 
}); 

var fp = new Ext.form.FormPanel({ 
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
      {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'}, 
     htmlEditor] 
}); 

var w = new Ext.Window({layout: 'fit', 
    height: 400, width: 600, 
    tbar: [{text: 'click', 
     handler: function() { 
      // hide element 
      Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
      w.doLayout(); 
     } 
     }], 
    items: fp 
}); 

w.show(); 

निष्पादित, उपकरण पट्टी बटन पर क्लिक करें "क्लिक", एक क्षेत्र गायब हो जाना चाहिए, तो एचटीएमएल एडिटर नीचे खाली जगह को देखो:

अपडेट किया गया यहाँ एक नमूना कोड है।

Answer 1

आपको तत्व की "दृश्यता" संपत्ति का उपयोग करना चाहिए। चाल यह है कि यहां तक ​​कि अदृश्य तत्व पृष्ठ पर स्थान लेते हैं।

object.style.visibility="hidden" 

Answer 2

जब आप जोड़ने/एक कंटेनर से घटकों को हटाने, आप() यह आयाम पुनर्गणना के लिए Container.doLayout कॉल करनी होगी।

[संपादित करें]: ध्यान दें कि यह केवल EX < = 3.x पर लागू होता है। 4.x में लेआउट सिस्टम आपके लिए इसका प्रबंधन करता है। यद्यपि विधि अभी भी है, आपको इसे कभी भी उपयोग नहीं करना चाहिए।

Answer 3

[नई जवाब तो मैं कोड फ़ॉर्मेट कर सकते हैं]

एक दृष्टिकोण अपने बाहरी लेआउट कुछ अधिक आप क्या चाहते हैं, करने के लिए एक उत्तर (अपने शीर्ष क्षेत्रों) और केंद्र के साथ एक BorderLayout का कहना है की तरह डिजाइन बनाने के लिए होगा (एचटीएमएल संपादक)। इस तरह एचटीएमएल संपादक को बस इसके कंटेनर (केंद्र क्षेत्र) की ऊंचाई 100% तक लगाया जा सकता है। उस स्थिति में, चूंकि लेआउट ठीक से प्रबंधित किया जाएगा, मेरी पिछली doLayout() सलाह काम करनी चाहिए।

यदि आप वास्तव में ऐसे लेआउट के बाहर के फ़ील्ड प्रबंधित करना चाहते हैं जो आपको ऐसा करने में मदद करेंगे, तो यह ऊंचाइयों को मैन्युअल रूप से प्रबंधित करने के लिए आपके ऊपर होगा। एंकर संपत्ति को संशोधित करना एक तरीका है। जिस तरह से मैंने इसे अतीत में किया है (और अधिक प्राथमिक है) एक उचित घटना को सुनना और आवश्यकतानुसार घटकों का आकार निर्धारित करना है। उदाहरण के लिए, आप खिड़की करने के लिए एक आकार बदलने श्रोता जोड़ सकते हैं:

listeners: { 
     'resize': function(){ 
      Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110); 
     } 
    } 

अपने परीक्षण कोड का उपयोग करना, यह आप बहुत करीब हो जाता है। हालांकि, वास्तविक कोड में आप वास्तव में अपने मौजूदा दृश्य घटकों से ऊंचाइयों को प्राप्त करना चाहते हैं और हार्ड कोड के बजाए उस संख्या को घटाना चाहते हैं, लेकिन आपको विचार मिलता है। इस दृष्टिकोण को आसान बनाने का एक तरीका है अपने शीर्ष फ़ील्ड को एक अलग पैनल में जोड़ना जो ऑटोहेइट है: सत्य, फिर फ़ील्ड दिखाने या छिपाने के बाद, बस उस पैनल की ऊंचाई को मापें और विंडो की ऊंचाई से घटाएं (प्लस मार्जिन/पैडिंग) अपनी एचटीएमएल संपादक ऊंचाई प्राप्त करने के लिए (यही वह है जो मैंने पहले किया था जब मैं इसे प्रबंधित करने के लिए लेआउट पर भरोसा नहीं कर सका)।

जैसा कि आप देख सकते हैं, इस बिल्ली को त्वचा के कई तरीके हैं, इसलिए आप उस दृष्टिकोण को चुन सकते हैं जो आपके लिए उपयुक्त है।

Answer 4

autoHeight:true का उपयोग करें और विंडो कंटेनर फिट करने के लिए आकार बदलती है।

Answer 5

कोशिश इस Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); खिड़की के afterlayout घटना के अंदर डाल और एक शर्त वहाँ जोड़ने ...

इस तरह:

'afterlayout': function() { 
    <condition> { 
     Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
    } 
} 

आशा है कि यह मदद करता है!