[Ext JS 7 ]7.5 自适应配置 - Responsive Configs| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 7 ]7.5 自适应配置 - Responsive Configs

## [Ext JS 7 ]7.5 自适应配置 - Responsive Configs
### Ext JS的自适应支持
Ext JS 从5.x版本开始引入自适应配置（responsiveConfig）。启用自适应配置有两种方式：
使用混合（Responsive Mixin）
使用插件配置（plugins）
Mixin方式配置自适应示例
这里的示例是： 定义一个面板子类型， 面板的标题根据设备屏幕的宽度自动变化，当屏宽大于600时，使用长标题；小于600时，使用短标题，
示例的效果对比如下：
![](/upload/picture/2022-09-30/upload_fef83adc9db2b524cb48a9960558fc5f.png)
![](/upload/picture/2022-09-30/upload_eeeb37812e429652c45a3edd6908b8fa.png)
### 视图子类定义如下：
```javascript
 Ext.define('MyApp.view.GeneralSummary',{
	 extend:'Ext.panel.Panel',
	 mixins:['Ext.mixin.Responsive'],
	 responsiveConfig:{'width >= 600':{
	 title:'屏宽>600,长标题：三国（220年－280年）之魏、蜀、吴将军汇总表'},'width < 600':{
	 title:'屏宽<600,短标题：三国群英'}}
 });
```

### plugins方式配置自适应示例
mixins配置的方式使用在类的定义上，如果要在类实例上使用，就需要使用plugins的方式了，
同样以上面的示例效果为例，在配置类实例中使用自适应的代码如下：
```javascript
Ext.define('MyApp.view.GeneralSummary',{
	extend:'Ext.panel.Panel',
	items:[{
	xtype:'panel',
	plugins:'responsive',
	responsiveConfig:{'width >= 600':{
	title:'屏宽>600,长标题：三国（220年－280年）之魏、蜀、吴将军汇总表'},'width < 600':{
	title:'屏宽<600,短标题：三国群英'}}}
]});
```
需要注意：上面的是宽度时 viewport的宽度，不是组件的宽度。
结论：
不同的工具应用在不同的场景， 在加载时使用platformConfig，动态条件， 用responsiveConfig， 在更大的范围修改， 用Ext.app.Profile。
如果需要应用在平板和在桌面和手机看上去完全不一样， 可以考虑使用 cmd 的构建配置（profiles）。
responsiveConfig配置的规则和属性不仅在组件初始化显示的时候生效， 而且会根据设备的方向和大小的变化来适应。但是相比platformConfig， responsiveConfig的花销会大一些。
以下，根据设备的宽来显示标题：
自适应布局及实例
除了自适应配置动态显示标题， 自适应更多的使用在布局上， 即根据不同的屏幕宽度调整组件的子元素的布局。比如：屏幕宽的时候1行4个元素，屏幕窄的时候1行2个元素。自适应布局使用的布局类是Ext.ux.layout.ResponsiveColumn （该类的别名是responsivecolumn）。从该类的全路径类名可以看出，该类是位于ux包下，ux是Ext JS的扩展包， 默认不会导入，使用的话需要额外导入。
接下来以具体实例来演示自适应布局的使用。
### 1. 导入ux包。方式是修改app.json文件
在requires中加入ux
```javascript
"requires":["font-awesome","ux"]
```
除了核心库，默认产生的应用只额外包含font-awesome
### 2. 定义自适应列的组件
这里位于 项目的classic\src\view\main目录下
```javascript
 Ext.define('Osxm.panle.MyResponsivePanel',{
	 extend :'Ext.panel.Panel',
	 xtype :'myResponsivePanel',// height:'100%',
	 scrollable :'y',
	 width:'100%',
	 requires :['Ext.ux.layout.ResponsiveColumn'],
	 layout:'responsivecolumn',
	 items :[{
	 xtype :'panel',
	 height :100,
	 userCls :'big-50 small-100',
	 title :'Panel 1'},{
	 xtype :'panel', 
	 height :100,
	 userCls :'big-50 small-100',
	 title :'Panel 2'}]
 });
```
### 3. 建立scss的文件和目录
目录是： classic\sass\src\view\main， 下面新建一个Main.scss, 内容如下：
```javascript
.big-50{    
@include responsivecolumn-item(50%);}.x-responsivecolumn-small {>.small-100{
@include responsivecolumn-item(100%);}}
```
4. 效果演示
通过Sencha Cmd启动后测试
sencha app watch development
屏幕宽时， 一行两列，每列 宽度50%。
![](/upload/picture/2022-09-30/upload_9f1041a95f82075fd7b2b549705b44af.png)

屏幕窄时， 一行一列，每列 宽度100%。
![](/upload/picture/2022-09-30/upload_8f3d179deff53c03623e4859f5d284d7.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 7 ]7.5 自适应配置 - Responsive Configs

网站导航