extjs - केंद्र से एक विवश खिड़की और बाधा कंटेनर के शीर्ष पर स्थित




extjs4 extjs4.2 (3)

हमें एक विवश खिड़की (जैसा कि इस उदाहरण में ) ऊपर से सापेक्ष और उस कंटेनर के केंद्र की स्थिति निर्धारित करने की आवश्यकता है जहां इसे सीमित करना है लेकिन कॉन्फ़िग में हम केवल एक्स और वाई पाएंगे, जो प्रत्येक दस्तावेज़ परिवर्तन पर केंद्र की गणना करना होगा।

क्या इसका संग्रह करने का कोई अन्य तरीका नहीं है?


Answers

आप उपयोग कर सकते हैं

alignTo () डॉक्स

alignTo(element, [position], [offsets], [animate] )

निर्दिष्ट एंकर पॉइंट के सापेक्ष तत्व को संरेखित करता है। यदि अन्य तत्व दस्तावेज़ है, तो वह इसे व्यूपोर्ट में संरेखित करता है। स्थिति पैरामीटर वैकल्पिक है, और निम्न स्वरूपों में से किसी एक में निर्दिष्ट किया जा सकता है:

रिक्त: तत्व के शीर्ष-बायां कोने को लक्ष्य के निचले-बाएं कोने में ("टीएल-ब्लाल") में संरेखित करने के लिए डिफ़ॉल्ट। एक एंकर (पदावनत): पारित एंकर स्थिति को लक्ष्य तत्व के एंकर बिंदु के रूप में प्रयोग किया जाता है तत्व को संरेखित किया जायेगा उसके शीर्ष-बाएं कोने (टीएल) को उस बिंदु पर स्थान दिया जाएगा इस विधि को नीचे दो नए एंकर सिंटैक्स के पक्ष में पदावनत किया गया है। दो एंकर: यदि नीचे दिए गए तालिका से दो मान डैश द्वारा अलग किए जाते हैं, तो पहला मान तत्व के एंकर बिंदु के रूप में उपयोग किया जाता है, और दूसरे मान को लक्ष्य के एंकर बिंदु के रूप में उपयोग किया जाता है एंकर पॉइंट के अलावा, स्थिति पैरामीटर "?" का भी समर्थन करता है चरित्र। अगर "?" स्थिति स्ट्रिंग के अंत में पारित किया गया है, तत्व निर्दिष्ट के रूप में संरेखित करने का प्रयास करेगा, लेकिन यदि आवश्यक हो तो स्थिति को व्यूपोर्ट में बाधित करने के लिए समायोजित किया जाएगा। नोट करें कि व्यूपोर्ट की बाधाओं को लागू करने के लिए निर्दिष्ट किए गए तत्व की तुलना में अलग स्थिति में संरेखित करने के लिए गठबंधन तत्व स्वैप किया जा सकता है। निम्नलिखित समर्थित एंकर पदों के सभी हैं ... अधिक जानकारी के लिए दस्तावेज़ देखें

या

anchorTo () डॉक्स

anchorTo(element, [position], [offsets], [animate], [monitorScroll], [callback])

एंटीर को एक तत्व को दूसरे तत्व में एंकर करता है और इसे रीइलाइंस करता है जब विंडो का आकार बदल जाता है।

संपादित करें

यदि आप इसके बारे में कुछ प्रारंभिक स्थिति में करते हैं तो स्थिति विफल हो सकती है। मैं Ext.function.createDelayed का उपयोग करके संरेखण में देरी जोड़ने का प्रयास करूंगा । देरी के रूप में 10-50 के बीच कुछ प्रयास करें

उदाहरण:

Ext.Function.createDelayed(windowRef.anchorTo,50)(Ext.getBody(),'t-t',[-100,0]);

मुझे लगता है कि Ext.window.Window के showBy विधि द्वारा ऐसा करने का सबसे आसान तरीका प्रदान करता है क्योंकि यह खिड़की प्रदान करने की आवश्यकता नहीं है, आदि। इससे पहले कि इसे लागू किया जा सके। एक समाधान जो माता पिता के कंटेनर के रूप में ऐप के शरीर का उपयोग करता है, इस तरह दिखता है:

let appBody = Ext.getBody();
Ext.create({
    xtype: 'window'
}).showBy(appBody, 't-t', [-100, 0])

showBy विधि के बारे में अधिक जानकारी के लिए showBy डॉक्स देखें (यहां एक्सटेंशन 4 और 6 के लिए लिंक हैं)


केवल दो और चीजें जिन्हें मुझे जानने में मदद मिली, भले ही वे सवाल का हिस्सा न हों, वास्तव में।

आप दूसरे घटक की कुछ घटनाओं को सुनने के लिए घटक को बताने के लिए relayEvents विधि का उपयोग कर सकते हैं और फिर उन्हें फिर से आग लग सकते हैं जैसे कि वे पहले घटक से उत्पन्न होते हैं। एपीआई दस्तावेज़ स्टोर load इवेंट को रिले करने वाले ग्रिड का उदाहरण देते हैं। कई घटकों को समाहित करने वाले कस्टम घटकों को लिखते समय यह काफी आसान है।

दूसरी तरफ, यानी mycmp घटक mycmp द्वारा प्राप्त उप-घटकों में से किसी एक को प्राप्त करने वाली घटनाओं पर subcmp , इस तरह किया जा सकता है

mycmp.on('show' function (mycmp, eOpts)
{
   mycmp.subcmp.fireEvent('show', mycmp.subcmp, eOpts);
});