唐家三少_[Ext JS6]多類(lèi)型設備開(kāi)發(fā)| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS6]多類(lèi)型設備開(kāi)發(fā)

## [Ext JS6]多類(lèi)型設備開(kāi)發(fā)
ExtJS 6可以很容易做到在多種設備運行的前端應用。
### 通用的應用程序和工具包
Ext JS６將 Ext JS 和 Touch合并到包含不同工具包的同一個(gè)框架中。 classic 和 modern 。這些工具包包含 ExtJS 和 Touch 的視圖層。共享核心資源和邏輯功能的應用就成為通用的應用程序。
選擇應用程序的工具包， 只需要修改由 Cmd 產(chǎn)生的應用程序的 app.json 文件的如下內容：
“toolkit”: “classic”,
兩個(gè)框架的核心部分， 像data、controllers、models等被調整到一個(gè)共同的平臺，這樣就可以共享數據和邏輯。
app.json是由cmd產(chǎn)生的，包含了一些可以調整的屬性。
如果是就項目的升級， 舊的app.json可能有點(diǎn)屬性沒(méi)有， 升級之后，在.sencha/app/app.defaults.json文件就可以看到默認值的配置了， 復制到對對應的app.json。
Classic - 經(jīng)典
Classic工具 包支持傳統的 Ext JS 5 的應用程序， 包括桌面瀏覽器、平板和觸摸屏的筆記本電腦。
Modern - 現代
Modern工具包支持 HTML5應用程序， 包括桌面和手機的所有現代瀏覽器 (IE11及以上)都支持。
### 構建配置
對app.json文件的builds屬性的不同配置可以創(chuàng  )建不同類(lèi)型的應用程序。習慣上，構建不同主題和本地化的應用。
通過(guò)設置classic?或者modern?（也可以是同時(shí)設置）， Cmd 會(huì )找到每一個(gè)配置來(lái)進(jìn)行構建。
在每個(gè)工具包中， 業(yè)務(wù)邏輯是共用的。
看一個(gè)實(shí)例：
```javascript
"builds": {   
	"mymodern": {
	"toolkit" : "modern",
	"theme"   : "theme-cupertino",
	"requires": [
		"charts",
		"ux"       
	]   
	},
	"myclassic": {
	"toolkit" : "classic",
	"theme"   : "theme-neptune",
	"slicer"  : null,
	"requires": [
		"charts"       
	]   
}}
```

### Cmd 構建
以上面為例，
構建現代的應用程序
```
sencha app build mymodern
```

構建經(jīng)典的應用程序
```
sencha app build myclassic
```

構建所有的
```
sencha app build
```

注意：構建的名字是可以隨便給的， 文件和命令對應上就可以了。
以上mymodern
的構建使用 modern 工具包，使用ux和 chart 的包，主題是：cupertino 。
可以創(chuàng  )建任意的構建， 默認，輸出的目錄在根目錄的構建目錄。
### 通用應用程序
通用應用程序使用 Cmd 產(chǎn)生跨兩個(gè)工具包的多個(gè)應用程序。 應用程序的構建結果可以運行在桌面端或是移動(dòng)設備。需要注意的是同一個(gè)個(gè)應用程序不能在同一個(gè)類(lèi)路徑包含 modern和　classic兩個(gè)框架。一般狀況， 應用程序會(huì )在一個(gè)傳統的應用程目錄包含全局邏輯， 也就是目錄：app。理想狀況下， 應用程序的通用部分包括數據、模型、視圖模型等， 共享控制器。邏輯部分跨工具包需要好好考慮一下。
舉例來(lái)說(shuō)， 一個(gè)經(jīng)典的應用程序有一個(gè)grid, 一個(gè)現代的應用程序有一個(gè)list, 兩個(gè)組件共享store和model。如果需要這兩個(gè)組件針對用戶(hù)的操作做出反應，　就需要在這個(gè)grid和list找到相同的事件。因為兩個(gè)組件都可以觸發(fā)select事件，理想的方案可能是利用它。但是，如果邏輯有包含itemtap， 而這個(gè)在經(jīng)典模式是不認識的， 這樣在Cmd構建經(jīng)典的時(shí)候就可能會(huì )有問(wèn)題。
考慮共用邏輯和資源之后， 在不同的工具包的 src目錄下創(chuàng  )建不同工具包特定的代碼。
注意： 如果是構建單個(gè)工具包的應用，則目錄結構看起來(lái)和之前的很類(lèi)似。
Ext JS６目錄結構,包括三個(gè)部分：
全局應用代碼
經(jīng)典特定代碼
現代特定代碼
類(lèi)似：
// app     // app          // model          // store              // view     // classic          // src          // sass          // resources     // modern          // src          // sass          // resources     // resources     // sass

### 創(chuàng  )建通用的應用
使用 cmd 命令：
```
sencha -sdk /path/to/ExtSDK generate app MyApp ./MyAppLocation
```

這個(gè)命令會(huì )創(chuàng  )建一個(gè)功能齊全的通用應用， 會(huì )產(chǎn)生classic?和modern?的應用， 共用的部分在 app目錄下。工具包特定的定義在各自的目錄中（modern 、classic） 。
在開(kāi)發(fā)的時(shí)候， 可以針對不同的工具包進(jìn)行啟動(dòng)：
現代：
```
sencha app watch modern
```
經(jīng)典：
```
sencha app watch classic 
```
如果不輸入查看的目標的話(huà)， 默認使用builds?配置里的第一個(gè)。
對應用構建之后， 就可以在各自的瀏覽器進(jìn)行查看。在手機查看modern?風(fēng)格的， 在桌面查看classic版本的。
### 運行時(shí)配置
除此，還可以通過(guò)運行是配置， 包括應用配置、響應配置和平臺配置 來(lái)使用戶(hù)對于不同的媒介有著(zhù)相同的無(wú)縫的體驗。
#### App Profiles - 應用配置
Ext.app.Profile可以基于mainView(或者 Viewport)切換應用的視圖。也就是說(shuō)， 可以通過(guò)在某些條件下激活一個(gè)profile?創(chuàng  )建一整套不同的視圖。舉例來(lái)說(shuō)， 根據應用在不同的設備上（移動(dòng)或者桌面瀏覽器）指定特定的視圖。
創(chuàng  )建兩個(gè)應用配置的例子：
```javascript
Ext.define('App.Application', {
	extend: 'Ext.app.Application',
	profiles: [
		'Desktop',
		'Mobile'    
]});
```

通過(guò)Profile的isActive方法返回生效的配置， 以偵測到的操作系統為例：
```javascript
Ext.define('App.profile.Desktop', {
	extend: 'Ext.app.Profile',
	mainView: 'App.view.desktop.Main',
	isActive: function () {
		return Ext.os.is.Desktop;    
	},    
	launch: function () {
		console.log('Launch Desktop');    
}});
```

配置不會(huì )使用到mainView配置，可以使用配置的launch方法進(jìn)一步客制， 僅生效的配置的launch會(huì )被執行。
#### Platform Configs - 平臺配置
platformConfig?屬性使用在類(lèi)的定義中， 用于基于平臺或設備的類(lèi)型的配置， 類(lèi)似：
```javascript
Ext.define('App.view.summary.Manufacturing', {
	extend: 'Ext.panel.Panel',
	title: 'Mfg Summary',
	platformConfig: {
	desktop: {
		title: 'Manufacturing Summary'        
	}    
}});
```

等效于：
```javascript
Ext.define('App.view.summary.Manufacturing', {
	extend: 'Ext.panel.Panel',
	title: testForDesktop ? 'Manufacturing Summary': 'Mfg Summary'}
);
```

第一種方式將platformConfig看成是類(lèi)定義的一部分， 如果將視圖看成數據的話(huà)， 第二種方式是標準的 JSON格式。
也可以如下方式使用：
```javascript
Ext.define('App.view.summary.Manufacturing', {
	extend: 'Ext.panel.Panel',
	items: [{
		xtype: 'panel',
		platformConfig: {
			desktop: {
				title: 'Manufacturing Summary'
			},            
		'!desktop': {
			title: 'Mfg Summary'
			}        
		}    
}]});
```

platformConfig的配置由initConfig?方法進(jìn)行合并處理，也就是說(shuō)， 只有在構造函數調用initConfig方法的類(lèi)platformConfig才能生效。這些類(lèi)包括：Ext.Widget,?Ext.Component， 大部分的數據類(lèi)AbstractStore， 和使用Observable的類(lèi)。
#### 響應配置 - Responsive Configs
Ext JS 5開(kāi)始引入responsiveConfig?，Responsive Mixin?和插件啟用它。responsiveConfig配置的規則和屬性不僅僅是在創(chuàng  )建實(shí)例的時(shí)候， 而且會(huì )根據設備的方向和大小的變化來(lái)適應。相比platformConfig， responsiveConfig?的花銷(xiāo)會(huì )大一些。
以下，根據設備的寬來(lái)顯示標題：
```javascript
 Ext.define('App.view.summary.Manufacturing', {
	 extend: 'Ext.panel.Panel',
	 mixins: ['Ext.mixin.Responsive'],
	 responsiveConfig: {
	 'width >= 600': {
	 title: 'Manufacturing Summary'
	 },
	 'width < 600': {
	 title: 'Mfg Summary'
	 }    
 }});
```

以上是應用在類(lèi)上面， 如果是應用在實(shí)例上，就需要使用插件plugins了， 類(lèi)似：
```javascript
Ext.define('App.view.summary.Manufacturing', {
	extend: 'Ext.panel.Panel',
	items: [{
		xtype: 'panel',
		plugins: 'responsive',
		responsiveConfig: {
		'width >= 600': {
			title: 'Manufacturing Summary'
		},
		'width < 600': {
			title: 'Mfg Summary'            
		}        
	}    
}]});
```

需要注意的是上面的是 viewport?的寬度，不是組件的寬度。
### 結論
不同的工具應用在不同的場(chǎng)景， 在加載時(shí)使用platformConfig，動(dòng)態(tài)條件， 用responsiveConfig， 在更大的范圍修改， 用Ext.app.Profile。
如果需要應用在平板和在桌面和手機看上去完全不一樣， 可以考慮使用 cmd 的構建配置（profiles）。

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS6]多類(lèi)型設備開(kāi)發(fā)

網(wǎng)站導航