已完结小说排行榜_[ExtJS6]ResponsiveColumn-自適應列布局| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[ExtJS6]ResponsiveColumn-自適應列布局

## [ExtJS6]ResponsiveColumn-自適應列布局
### 1. 在app.json加上ux模塊
ResponsiveColumn 位于ux的擴展包中，所以需要導入。
編輯： app.json
```json
"requires": [ 
"font-awesome", 
"ux"
],

```
默認產(chǎn)生的只有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， 下面新建一個(gè)Main.scss, 內容如下：
```css
.big-50 { 
@include responsivecolumn-item(50%);
}
.x-responsivecolumn-small {   
> .small-100 {  
@include responsivecolumn-item(100%);   
}
```

#### 效果演示
通過(guò)Sencha Cmd啟動(dòng)后測試
sencha app watch development
![](/upload/picture/2022-10-09/upload_ccb6c849ecb129efcd2ce39ddadcd01e.png)

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

筆者嘗試使用單獨文件測試此功能但是沒(méi)有成功。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[ExtJS6]ResponsiveColumn-自適應列布局

網(wǎng)站導航