Using responsive plugin in ExtJS 5

问题

I have used extjs responsive plugin as below to make a responsive data grid.

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

But what I actully need is dinamically change the width according to the viewport size. Something like this.

responsiveConfig: {
        width: getViewPortsize()/2
    }

How can I actually do this?

回答1:

The best way to get the viewport size like that would be to call a getCmp of the viewport, or if you have it saved to a variable you can call it like so

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

The only problem this will cause is that the viewport will change if the browser size changes. you will need to fix this by updating the responsiveConfig width regularly inside of a resize listener for the viewport.

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

回答2:

You could use responsive formulas like this:

{
    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;
            }
        }
    }
}

This will let you automatically adjust your panels width.

来源：https://stackoverflow.com/questions/24995667/using-responsive-plugin-in-extjs-5

标签

extjs