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
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
