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