Ext JS 模拟后端数据实现| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Ext JS 模拟后端数据实现

## Ext JS 模拟后端数据实现
在实际的Ext JS应用中， Store的数据大部分应该是从后端读取， 也就是通过Ajax 的Proxy 获取， 但是在应用开发的初期， 特别是在前后端分离的框架中， 前端可能先需要开发一些页面进行显示；此外， 在对Ext JS 的功能和组件进行教学时， 也可能需要有一些数据进行展示。 基于上述的这些目的，自然就出现了这样的需求： 是否可以使用模拟的数据？
答案当然是肯定的， 而且实现方式也不止一种。
### 模拟数据的实现方式
这里介绍两种方式：
Ext JS提供的模拟数据管理器 Ext.ux.ajax.SimManager
使用json文件返回数据。
### 1. 使用Ext.ux.ajax.SimManager 模拟后端数据
Ext.ux.ajax.SimManager 是用来管理模拟Ajax响应的单例类。从类的命名空间可以看到， 这个类不是核心包中， 而是在ux 中的。所以， 要使用这个功能， 就需要在 app.json 引入ux扩展模块。
```javascript
"requires": [        "ux"    ],
```

导入ux扩展包的配置界面如下图所示：

使用Ext.ux.ajax.SimManager 可以实现Ajax请求就在毫无察觉的状况下由模拟器处理（simlets）， 这个功能是在使用Ext.data.Connection 方法的钩子实现的， 所以Ext.data.Connection类的所有子类（比如Ext.Ajax）都可以使用。
数据模拟器的初始化方式
数据模拟器的初始方式就是调用Ext.ux.ajax.SimManager的init() 方法注册一个simlet的示例。
simlet是simulated servers的简写， 也就是模拟服务器。
这里初始化一个模拟服务器 ， 并且注册一个 /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' },                 ...             ]         }     }); }

```
这里定义了一个 initAjaxSim() 函数 ，在Ext.onReady() 里面进行调用。在基于Ext JS 的单页面应用中， 也可以在Application.js 的launch 中函数中定义， 类似：

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

模拟例外配置
模拟的配置是整个应用配置的， 如果某个请求需要实际的地址， 也就是不需要模拟怎么处理呢？
处理方式是 加上配置 nosim: true 。示例代码类似：
```javascript
 Ext.Ajax.request({     url: 'myurl/xx',    nosim: true, //     params: {         id: 1     },     success: function(response){         var text = response.responseText;         // process server response here     } }); 
```

模拟相关类
Ext.ux.ajax.SimManager ， 模拟器单例类
Ext.ux.ajax.Simlet ， 模拟服务的父类
Ext.ux.ajax.JsonSimlet ， JSON格式的模拟
Ext.ux.ajax.DataSimlet 一般数据的模拟，支持排序、过滤、分组
Ext.ux.ajax.SimXhr ， 模拟 XMLHttpRequest 对象的方法和属性，但由提供数据的 Ext.ux.ajax.Simlet 实例支持。
Ext.ux.ajax.PivotSimlet ，远程枢轴计算。 注意过滤数据透视结果不起作用。
Ext.ux.ajax.XmlSimlet ， XML格式数据模拟
### 2. 使用json文件返回数据。
因为Sencha CMD 内置了一个Web服务器，在开发阶段， 使用 sencha app watch 就可以启动服务器， 默认的端口是1841, 基于此， 在项目中的文件，就是就可以使用 http://localhost:1841/xxx的方式进行访问。 所以， 在项目中定义一些JSON 格式的数据文件， 就可以用来作为数据源， 比如， 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 ， 这样的话， url 的地址配置为 /app/data/users.json 就可以了。
相比 Ext.ux.ajax.SimManager，这种方式对于模拟请求比较多的场景比较适用， 因为全部写在Ext.ux.ajax.SimManager， 查看和管理起来不是很方便。
### 模拟与真实的切换
以上两种方式进行模拟，对于真实项目来说， 都是有一些应用场景的， 在项目开发的最后， 还是要回到真实的数据， 所以就需要切换到真实的地址。
对于Ext.ux.ajax.SimManager ，可以直接注释掉相关的模拟代码
对于方式2， 则可以写一个获取URL 的公用方法， 在应用或者请求层级配置一个开关的参数进行切换。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Ext JS 模拟后端数据实现

网站导航