欢乐颂_Ext JS 模擬后端數據實(shí)現| 成都西華升騰科技有限公司

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

CmsWing

Ext JS 模擬后端數據實(shí)現

## Ext JS 模擬后端數據實(shí)現
在實(shí)際的Ext JS應用中， Store的數據大部分應該是從后端讀取， 也就是通過(guò)Ajax 的Proxy 獲取， 但是在應用開(kāi)發(fā)的初期， 特別是在前后端分離的框架中， 前端可能先需要開(kāi)發(fā)一些頁(yè)面進(jìn)行顯示；此外， 在對Ext JS 的功能和組件進(jìn)行教學(xué)時(shí)， 也可能需要有一些數據進(jìn)行展示。 基于上述的這些目的，自然就出現了這樣的需求： 是否可以使用模擬的數據？
答案當然是肯定的， 而且實(shí)現方式也不止一種。
### 模擬數據的實(shí)現方式
這里介紹兩種方式：
Ext JS提供的模擬數據管理器 Ext.ux.ajax.SimManager
使用json文件返回數據。
### 1. 使用Ext.ux.ajax.SimManager 模擬后端數據
Ext.ux.ajax.SimManager 是用來(lái)管理模擬Ajax響應的單例類(lèi)。從類(lèi)的命名空間可以看到， 這個(gè)類(lèi)不是核心包中， 而是在ux 中的。所以， 要使用這個(gè)功能， 就需要在 app.json 引入ux擴展模塊。
```javascript
"requires": [        "ux"    ],
```

導入ux擴展包的配置界面如下圖所示：

使用Ext.ux.ajax.SimManager 可以實(shí)現Ajax請求就在毫無(wú)察覺(jué)的狀況下由模擬器處理（simlets）， 這個(gè)功能是在使用Ext.data.Connection 方法的鉤子實(shí)現的， 所以Ext.data.Connection類(lèi)的所有子類(lèi)（比如Ext.Ajax）都可以使用。
數據模擬器的初始化方式
數據模擬器的初始方式就是調用Ext.ux.ajax.SimManager的init() 方法注冊一個(gè)simlet的示例。
simlet是simulated servers的簡(jiǎn)寫(xiě)， 也就是模擬服務(wù)器。
這里初始化一個(gè)模擬服務(wù)器 ， 并且注冊一個(gè) /app/data/user 的模擬地址， 初始化的示例代碼如下：
```javascript
 Ext.onReady(function () {     initAjaxSim();     // normal stuff }); function initAjaxSim () {     Ext.ux.ajax.SimManager.init({         delay: 300     }).register({         '/app/data/user': {             type: 'json',  // 使用JsonSimlet             data: [                 { foo: 42, bar: 'abc' },                 ...             ]         }     }); }

```
這里定義了一個(gè) initAjaxSim() 函數 ，在Ext.onReady() 里面進(jìn)行調用。在基于Ext JS 的單頁(yè)面應用中， 也可以在A(yíng)pplication.js 的launch 中函數中定義， 類(lèi)似：

```javascript
launch: function() {        //alert('launch');        
	Ext.ux.ajax.SimManager.init({            
	delay: 300        
}).register({
```

模擬例外配置
模擬的配置是整個(gè)應用配置的， 如果某個(gè)請求需要實(shí)際的地址， 也就是不需要模擬怎么處理呢？
處理方式是 加上配置 nosim: true 。示例代碼類(lèi)似：
```javascript
 Ext.Ajax.request({     url: 'myurl/xx',    nosim: true, //     params: {         id: 1     },     success: function(response){         var text = response.responseText;         // process server response here     } }); 
```

模擬相關(guān)類(lèi)
Ext.ux.ajax.SimManager ， 模擬器單例類(lèi)
Ext.ux.ajax.Simlet ， 模擬服務(wù)的父類(lèi)
Ext.ux.ajax.JsonSimlet ， JSON格式的模擬
Ext.ux.ajax.DataSimlet 一般數據的模擬，支持排序、過(guò)濾、分組
Ext.ux.ajax.SimXhr ， 模擬 XMLHttpRequest 對象的方法和屬性，但由提供數據的 Ext.ux.ajax.Simlet 實(shí)例支持。
Ext.ux.ajax.PivotSimlet ，遠程樞軸計算。 注意過(guò)濾數據透視結果不起作用。
Ext.ux.ajax.XmlSimlet ， XML格式數據模擬
### 2. 使用json文件返回數據。
因為Sencha CMD 內置了一個(gè)Web服務(wù)器，在開(kāi)發(fā)階段， 使用 sencha app watch 就可以啟動(dòng)服務(wù)器， 默認的端口是1841, 基于此， 在項目中的文件，就是就可以使用 http://localhost:1841/xxx的方式進(jìn)行訪(fǎng)問(wèn)。 所以， 在項目中定義一些JSON 格式的數據文件， 就可以用來(lái)作為數據源， 比如， Store 的定義如下：
```javascript
Ext.define('ExtjsdevEncy.store.chp03.RemoteTreeStore', {    
	extend: 'Ext.data.TreeStore',    
	alias: 'store.remoteTreeStore',    
	autoLoad:true,    
	proxy:{        
	type: 'ajax',//不可少        
	url:'app/data/treedata.json'    
}});
```

/app/data 目錄 是筆者推薦存放JSON文件的路徑。
文件的命名和請求的命名盡量保持一致或者對應，比如請求地址是 /users, 則文件名是 users.json ， 這樣的話(huà)， url 的地址配置為 /app/data/users.json 就可以了。
相比 Ext.ux.ajax.SimManager，這種方式對于模擬請求比較多的場(chǎng)景比較適用， 因為全部寫(xiě)在Ext.ux.ajax.SimManager， 查看和管理起來(lái)不是很方便。
### 模擬與真實(shí)的切換
以上兩種方式進(jìn)行模擬，對于真實(shí)項目來(lái)說(shuō)， 都是有一些應用場(chǎng)景的， 在項目開(kāi)發(fā)的最后， 還是要回到真實(shí)的數據， 所以就需要切換到真實(shí)的地址。
對于Ext.ux.ajax.SimManager ，可以直接注釋掉相關(guān)的模擬代碼
對于方式2， 則可以寫(xiě)一個(gè)獲取URL 的公用方法， 在應用或者請求層級配置一個(gè)開(kāi)關(guān)的參數進(jìn)行切換。

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

購物車(chē)

0 ITEMS ON YOUR CART

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

Ext JS 模擬后端數據實(shí)現

網(wǎng)站導航