किसी भी ExtJS4 लेआउट की 'फ्लेक्स' संपत्ति का क्या अर्थ है?

Question

मैं जहां कुछ संख्या फ्लेक्स के खिलाफ निर्दिष्ट किया जाता है उदाहरण देखा है, की तरह

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1} 

क्या इस संपत्ति से अवगत करा दिया है कहते हैं? निर्दिष्ट दस्तावेज को समझना थोड़ा मुश्किल है, इसलिए एक सरल स्पष्टीकरण बहुत मदद करेगा!

Answer 1

प्रलेखन वर्णन है, जो आप ने कहा कि आप थोड़ा मुश्किल पाया का उपयोग कर से बचने के लिए:

फ्लेक्स hbox और vbox लेआउट में एक संपत्ति के रूप में प्रयोग किया जाता है, और राशि को इंगित करता अंतरिक्ष का यह घटक अपने मूल कंटेनर में उठाएगा।

आप एक फ्लेक्स संपत्ति मूल्य के रूप में शून्य से अधिक किसी भी संख्या का उपयोग कर सकते हैं - कुछ लोग सादगी के लिए पूरी संख्या का उपयोग करना पसंद करते हैं, अन्य मैंने 0.25 जैसे मूल्यों का उपयोग आसानी से प्रतिशत का प्रतिनिधित्व करने के लिए देखा है।

कार्रवाई में फ्लेक्स का एक बुनियादी उदाहरण:

var myPanel = Ext.create('Ext.panel.Panel', { 
    width: 100, 
    height: 100, 
    layout: { 
     type: 'hbox', 
     align: 'stretch' // Stretches child items to the height of this panel. 
    }, 
    items: [{ 
     xtype: 'container', 
     html: 'Container one!', 
     flex: 5 // This takes up 50% of the container. 
    }, { 
     xtype: 'container', 
     html: 'Container two!', 
     flex: 3 // This takes up 30% of the container. 
    }, { 
     xtype: 'container', 
     html: 'Container three!', 
     flex: 2 // This takes up 20% of the container. 
    }] 
}); 

कुंजी यहां जानना है कि यह प्रत्येक फ्लेक्स कि लेआउट को परिभाषित करता है के मूल्य को नहीं है, लेकिन कैसे ये मान सब एक दूसरे से संबंधित हैं। यदि मैंने इस लेआउट में 10 के फ्लेक्स के साथ एक और कंटेनर जोड़ा है, तो इसमें लेआउट का आधा हिस्सा होगा, क्योंकि 10 आधा 10 + 5 + 3 + 2 = 20.

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

Answer 2

यह VBox और HBox लेआउट में प्रयोग किया जाता है:

यह विन्यास विकल्प कंटेनर इस लेआउट द्वारा प्रबंधित के बच्चे आइटम के लिए लागू किया जा रहा है। एक फ्लेक्स प्रॉपर्टी के साथ प्रत्येक बच्चा आइटम प्रत्येक आइटम के रिश्तेदार फ्लेक्स मूल्य के अनुसार क्षैतिज रूप से फ्लेक्स मान निर्दिष्ट सभी आइटमों की तुलना में फ्लेक्स किया जाएगा। कोई भी बच्चा आइटम जिसमें फ्लेक्स = 0 या फ्लेक्स = अपरिभाषित होगा 'flexed' नहीं होगा (प्रारंभिक आकार बदला नहीं जाएगा)।

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox देखें आदि

Answer 3

चलें इस के उदाहरण पर विचार, अगर वहाँ एक पैरेंट कंटेनर 100 के रूप में होने चौड़ाई, और निम्न कॉन्फ़िगरेशन के साथ तीन बच्चे तत्व होने है:

1st Element - width:70 
2nd Element - flex:2 
3rd Element - flex:1 

तो अब, इंजन पहले पहले 70 आवंटित करेगा तत्व। और फिर यह शेष उपलब्ध चौड़ाई को 2: 1 के अनुपात में विभाजित करेगा और 20 से दूसरे और 10 को तीसरे तत्व को आवंटित करेगा।

इस प्रकार, फ्लेक्स बाल तत्वों के बीच सापेक्ष चौड़ाई निर्दिष्ट करने का एक तरीका है। इसके अलावा, केवल जोड़ने के लिए, फ्लेक्स का भारी उपयोग द्रव लेआउट में समस्या पैदा कर सकता है, यह तथ्य यह है कि फ्लेक्स आम तौर पर शेष उपलब्ध चौड़ाई पर कार्य करता है जो कुल कंटेनर चौड़ाई कम होने पर भी 0 हो सकता है और इससे फ़ील्ड ओवरलैपिंग हो सकती है। Example here.