ExtJs6实现布局响应式

目前我想实现两个效果

1.屏幕分辨率低的时候，红色部分移到下面(north->south)

2.行列布局，分辨率大的时候显示一行4个，中等的时候显示一行3个，小的时候显示一行2个

 

 

效果如图所示

代码如下

var centerPanel = Ext.create('Ext.panel.Panel', {region : 'center',autoScroll : true,title : 'Container Panel',layout : {type : 'column'},items : [{title : 'Item 1',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 2',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 3',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 4',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 5',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 6',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 7',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 8',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 9',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 10',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 11',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 12',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 13',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}, {title : 'Item 14',height : 100,border : true,columnWidth : .25,// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {columnWidth : .25},'width < 1000' : {columnWidth : .33},'width < 800' : {columnWidth : .5}}}]});new Ext.Viewport(Ext.create('Ext.Panel', {layout : 'border',border : true,autoScroll : true,items : [centerPanel, {title : 'Some Title',region : 'north',height : 300,bodyStyle : 'background-color:red',border : true,xtype : 'panel',title : 'Some SomeSomeSomeSomeSome',// 启用响应式布局插件plugins : {responsive : true},// 响应式布局配置responsiveConfig : {'width >= 1000' : {region : 'north',height : 300},'width < 1000' : {region : 'south',height : 200}}}]}));

 

 

关键代码：

// 启用响应式布局插件
plugins: {responsive: true
},
// 响应式布局配置
responsiveConfig: {'width >= 1000': {columnWidth: .25},'width < 1000': {columnWidth: .33},'width < 800': {columnWidth: .5}
}

extjs6 为了性能，默认是不开启响应式布局的，所以需要在plugins中启用，同时配置响应的规则

规则

在responsiveConfig对象中的每一个键，或规则，只是一个简单的javascript表达式。以下变量可用来作为responsiveConfig对象的规则：
 

•     ‘landscape’ - 如果设备方向是竖向的，则为true (在桌面设备总是为true)
•     ‘portrait’ - 如果设备方向是横向的，则为true(在桌面设备总是为false)
•     ‘tall’ - 无论任何设备，只要宽度小于高度，则为true
•     ‘wide’ - 无论任何设备，只要宽带大于高度，则为true
•     ‘width’ - viewport的宽度
•     height’ - viewport的高度

可以以不同的方式来组合这些变量来创建复杂的响应规则，例如，以下responsiveConfig会在viewport宽度少于768像素且高度大于它的宽度时隐藏组件：

responsiveConfig: {'width < 768 && tall': {visible: true},'width >= 768': {visible: false}
}

 

responsiveConfig概述

要让Ext JS 5支持新的平板电脑，需要使用“responsiveConfig”，一个强大的新功能，可以让应用程序根据屏幕大小和方向进行动态响应。使用以下两个类其中之一就可以启用responsiveConfig：
 

• Ext.plugin.Responsive: 为Ext.Component添加响应能力
• Ext.mixin.Responsive: 为其他类添加响应能力

 

为什么用column布局而不是用hbox布局？

Column Layout因为是 float: left 浮动的机制，所以会自动换行；而HBox Layout需要借助其它比如Anchor 布局、行布局或者垂直方向盒子布局才能达到分行的效果。

Column布局中通过columnWidth属性达到响应式的目的，而HBox中无法修改属性换行，除非重新layout