ExtJS UI Component Responsiveness

更新记录：
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