在ExtJS 5中使用响应式插件 [英] Using responsive plugin in ExtJS 5

问题描述

 插件：响应，
 respondConfig：{
'width< 600'：{
 width：150 
}，
'width> = 600'：{
 width：320 
} 
} 
  

但是，我需要的是根据视口大小来双向更改宽度。这样的事情。

  respondConfig：{
 width：getViewPortsize（）/ 2 
} 
  

我该怎么做？

解决方案

您可以使用如下响应公式：

  {
 xtype：'panel' ，
 itemId：'mypanel'，
 
 //初始宽度为80％
 width：（Math.max（document.documentElement.clientWidth，window.innerWidth || 0） * 0.8），
 
 //响应配置执行响应公式
 plugins：'respond'，
 respondConfig：{
 personalWide：{}，
 personalTall：{} 
}，
 respondFormulas：{
 personalTall：function（context）{
 if（context.width< 600）{
 var mypanel = Ext .ComponentQuery.query（ '＃mypanel'）[0]; 
 if（mypanel）{
 mypanel.setWidth（context.width * 0.8）; 
} 
返回true; 
} 
}，
 personalWide：function（context）{
 if（context.width> = 600）{
 var mypanel = Ext.ComponentQuery.query '#mypanel'）[0]; 
 if（mypanel）{
 mypanel.setWidth（context.width * 0.8）; 
} 
返回true; 
} 
} 
} 
} 
  

将让您自动调整面板宽度。

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?

解决方案

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.

这篇关于在ExtJS 5中使用响应式插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！