更新记录:
2023年1月6日 从笔记迁移到博客
ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处:https://www.cnblogs.com/cqpanda/p/17031493.html
说明
Implementing responsiveness to the application
使用下面2个类之一即可
Ext.plugin.Responsive
//或者
Ext.mixin.Responsive
2种类的区别
These two classes work in the same way but there is a difference, as follows:
Ext.plugin.Responsive must be used for already created components
Ext.mixin.Responsive must be used for classes or components that new create or extend
Ext.plugin.Responsive使用
使用方法
plugins: 'responsive',
responsiveConfig: { ....}
不同平台的标签:
https://docs.sencha.com/extjs/7.6.0/classic/Ext.html#property-platformTags
实例1
plugins: 'responsive',
responsiveConfig: {
'width < 800': {
hidden:false
},
'(desktop && width >= 800)': {
hidden:true
},
'(tablet || phone)': {
hidden:false,
html:'<p>My Menu (phone or table) Zone..!</p>',
},
responsiveConfig: {
'(desktop && width < 800)': {
hidden:true
},
'(desktop && width >= 800)': {
hidden:false
},
'(phone)': {
hidden:true
},
'(tablet && width < 800)': {
hidden:true
},
'(tablet && width >= 800)': {
hidden:false
}
}
实例2
plugins: 'responsive',
responsiveConfig: {
'(desktop && width < 800)': {
hidden: true,
header: false,
title: '',
height: 100,
maxHeight: 175
},
'(desktop && width >= 800)': {
hidden: false,
header: true,
title: 'South Region is resizable',
height: 120 ,
maxHeight: 175
},
'!(desktop)': {
// Tablets and phones (will work)
hidden: false,
}
}
注意:ExtJS 7.6 版本请使用最新的Ext.Responsive功能,和这个类大同小异,文档地址:https://docs.sencha.com/extjs/7.6.0/classic/Ext.Responsive.html
标签:Component,width,Ext,UI,&&,Responsive,hidden,800,ExtJS From: https://www.cnblogs.com/cqpanda/p/17031493.html