[ExtJS6]ResponsiveColumn-自适应列布局| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[ExtJS6]ResponsiveColumn-自适应列布局

## [ExtJS6]ResponsiveColumn-自适应列布局
### 1. 在app.json加上ux模块
ResponsiveColumn 位于ux的扩展包中，所以需要导入。
编辑： app.json
```json
"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, 内容如下：
```css
.big-50 { 
@include responsivecolumn-item(50%);
}
.x-responsivecolumn-small {   
> .small-100 {  
@include responsivecolumn-item(100%);   
}
```

#### 效果演示
通过Sencha Cmd启动后测试
sencha app watch development
![](/upload/picture/2022-10-09/upload_ccb6c849ecb129efcd2ce39ddadcd01e.png)

![](/upload/picture/2022-10-09/upload_7624bbf6e6812698b1a060489eb4e17c.png)

笔者尝试使用单独文件测试此功能但是没有成功。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[ExtJS6]ResponsiveColumn-自适应列布局

网站导航