ExtJS 5 में उत्तरदायी प्लगइन का उपयोग करना




(2)

व्यूपोर्ट आकार के मिलते-जुलते आकार को प्राप्त करने का सबसे अच्छा तरीका व्यूपोर्ट का एक कॉल सेंटर होगा, या यदि आपने इसे एक वेरिएबल में सहेजा है तो आप इसे इसी तरह कॉल कर सकते हैं

responsiveConfig: {
     width: Ext.getCmp('viewportID').getWidth()/2
}

यह एकमात्र समस्या यह है कि व्यूपोर्ट बदल जाएगा यदि ब्राउज़र का आकार बदलता है व्यूपोर्ट के लिए एक आकार बदलने वाले श्रोता के अंदर नियमित रूप से उत्तरदायी कॉन्फ़फ़ीग चौड़ाई को अपडेट करके आपको इसे ठीक करना होगा।

listeners:{
    resize: function(viewport, width){
         Ext.getCmp('dynamicGridId').getPlugin('responsivePluginId').setConfig('width', viewport.getWidth()/2)
}

मैंने एक उत्तरदायी डेटा ग्रिड बनाने के लिए नीचे दिए गए प्लगइन का उपयोग किया है।

 plugins: 'responsive',
 responsiveConfig: {
    'width < 600': {
    width: 150
    },
    'width >= 600': {
    width: 320
    }
}

लेकिन जो कुछ मैं चाहता हूँ, व्यूपोर्ट आकार के अनुसार चौड़ाई बदलती है। कुछ इस तरह।

responsiveConfig: {
        width: getViewPortsize()/2
    }

मैं वास्तव में यह कैसे कर सकता हूँ?


आप इस तरह प्रतिक्रियाशील सूत्र का उपयोग कर सकते हैं:

{
    xtype: 'panel',
    itemId: 'mypanel',

    // Initial width to 80%
    width: (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8),

    // Responsive Config that executes responsive formulas
    plugins: 'responsive',
    responsiveConfig: {
        personalizedWide:{},
        personalizedTall:{}
    },
    responsiveFormulas: {
        personalizedTall: function (context) {
            if (context.width < 600){
                var mypanel=Ext.ComponentQuery.query('#mypanel')[0];
                if (mypanel){
                    mypanel.setWidth(context.width*0.8);
                }
                return true;
            }
        },
        personalizedWide: function (context) {
            if (context.width >= 600){
                var mypanel=Ext.ComponentQuery.query('#mypanel')[0];
                if (mypanel){
                    mypanel.setWidth(context.width*0.8);
                }
                return true;
            }
        }
    }
}

यह आपको स्वचालित रूप से आपके पैनल चौड़ाई को समायोजित करने देगा।