ExtJS 4.2 教程-07:Ext.Direct
在上一节中,我们介绍了ExtJS 中的服务器段数据代理,在介绍到Direct 代理的时候,我们提到了Ext.Direct。这一节我们将重点介绍Ext.Direct的具体用法,并对上一节中Direct代理进行补充。
Ext.Direct 提供了一种使用Javascript 调用服务器端方法的机制,它与服务器端技术无关,因此可以在php、java、.net 等众多平台中使用该技术。
我们本节中将以RemotingProvider 为例进行讲解。对于RemotingProvider 的执行流程,大致上是:定义API,并将API添加到Ext.direct.Manager,然后我们将通过调用API来执行远程请求。请求过程中,ExtJS 将创建一个Ajax 请求,将Remoting有关的数据发送到服务器的Remoter页面,Remoter将对其进行分流,根据action(对应类名)、method(对应方法名)调用不同的方法,完成执行调用后,将封装好的结果返回给客户端。
API 和 Router
在使用Ext.Direct的时候,我们需要将后台的类、方法等封装成API的形式,然后在Ext.direct.Manager 中进行注册。
通常情况下,API 可以由程序根据配置项生成,所谓的生成,无非是根据配置项生成可执行的Javascript代码,并以<script>标签的形式引入到页面中。我们今天将采用直接定义的方式来完成。代码如下:
var userAPI = Ext.create('Ext.direct.RemotingProvider', {
url: rootUrl + 'DirectAPI/Router',
actions: {
User: [
{
name: 'GetUserList',
len: 0
},
{
name: 'GetUser',
params: ['name']
}
]
}
});
userAPI 提供了两个操作,分别是GetUserList 和GetUser,他们都数据类 User。url 指向了DirectAPI/Router,此时我们需要在程序中添加DirectAPIController,然后在里面定义三个方法,代码如下:
public class DirectAPIController : Controller
{
public static List<User> UserList = null; static DirectAPIController()
{
if (UserList == null)
{
UserList = new List<User>();
UserList.Add(new User() { name = "www.qeefee.com", age = 1 });
UserList.Add(new User() { name = "QF", age = 26 });
}
} //
// GET: /DirectAPI/
[HttpPost]
public JsonResult Router(FormCollection collection)
{
Stream input = Request.InputStream;
input.Seek(0, SeekOrigin.Begin); byte[] buffer = new byte[input.Length]; Request.InputStream.Read(buffer, 0, (int)input.Length);
string inputString = Encoding.UTF8.GetString(buffer);
dynamic json = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(inputString); ExtResult result = new ExtResult();
result.tid = json.tid;
result.action = json.action;
result.method = json.method;
result.type = json.type; string method = json.method;
switch (method)
{
case "GetUserList":
{
result.result = GetUserList();
}
break;
case "GetUser":
{
string name = json.data.name;
result.result = GetUser(name);
}
break;
}
return Json(result);
} public List<User> GetUserList()
{
return UserList;
} public User GetUser(string name)
{
return UserList.Find(m => m.name == name);
} }
代码有点长了不好意思!主要的代码在Router方法中,在读取数据的时候,我使用Request 无法获取到,无奈之下只能读取InputStream,有知道为什么不能读取Request 的朋友还望告知。
在方法中先将客户端传递的POST数据进行读取,然后转换为Json字符串。在转换完成后根据method路由分配,将得到的结果传递给客户端。
这里对返回的数据进行了封装,ExtResult 类代码如下:
public class ExtResult
{
public string action { get; set; }
public string method { get; set; }
public int tid { get; set; }
public string type { get; set; }
public object result { get; set; }
}
客户端调用
有了我们前面定义的API,我们可以方便的使用定义好的方法:
User.GetUserList(function (result, event, success, options) {
var msg = [];
Ext.Array.each(result, function (item) {
msg.push(item.name + " " + item.age);
});
Ext.MessageBox.alert('提示', msg.join('<br />'));
});
我们把之前定义的User 作为静态类,GetUserList 是它的一个静态方法,我们可以像C#一样调用后台的方法。
除了直接调用之外,我们可以结合上节课中介绍的DirectProxy 来使用:
//创建Store
var store = Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'direct',
directFn: User.GetUserList,
reader: {
type: 'json'
}
}
}); //加载store
store.load({
callback: function (records, operation, success) {
var msg = [];
store.each(function (item) {
msg.push(item.get('name') + ' ' + item.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />'));
}
});
参数传递
Ext.Direct 支持两种参数传递形式:匿名参数和命名参数。
匿名参数是在Ext.Direct 推出以后就支持的,它不指定参数的名称,只指定参数个数,在调用的时候将参数作为一个字符串数组传递给后台。例如,我们为User 新增一个方法 GetUserByName,它需要一个name参数,我们此处使用匿名参数的形式:
{
name: 'GetUserByName',
len: 1
}
在调用的时候,将参数写在回调方法之前:
User.GetUserByName('QF', callback);
如果使用匿名参数,则有多少个参数就在callback之前写多少个参数,最终这些参数会作为data的一部分传递给服务器。
命名参数则是Ext 4.2中新增的,它允许在定义的时候指定参数的名称,然后在调用的时候使用JSON的格式传递参数,例如我们之前定义的GetUser 方法,它有一个name参数:
{
name: 'GetUser',
params: ['name']
}
在调用的时候,我们需要使用JSON格式的数据,指定参数名称对应的值:
User.GetUser({ name: 'QF' }, callback);
此时传递给服务器的数据形式如下:
消息订阅
Ext.Direct 为我们提供了方便的消息订阅机制。如果我们要订阅名称为“message”的消息,可以使用下面的代码完成:
Ext.direct.Manager.on('message', function (e) {
Ext.MessageBox.alert('提示', e.result);
});
此时,如果服务器返回的数据,type为event,name为message,则会弹出提示。服务器返回的数据:
轮询 - PollingProvider
Ext.Direct 还提供了轮询的方式,它会在指定时间段重复对数据库的请求操作。
var polling = Ext.create('Ext.direct.PollingProvider', {
url: rootUrl + 'DirectAPI/GetMessage',
type: 'polling',
interval: 5000,
listeners: {
data: function (provider, e, eOpts) {
Ext.MessageBox.alert('', e.data.msg);
}
},
id: 'GetMessagePolling'
});
//启动连接
polling.connect();
PollingProvider 会定时请求url,当得到服务器响应的数据后,触发data事件。
polling.connect() 方法会启动连接,如果要关闭连接,则使用polling.disconnect()
ExtJS 4.2 教程-07:Ext.Direct的更多相关文章
- ExtJS 4.2 教程-06:服务器代理(proxy)
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-6-server-proxy ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 ...
- ExtJS 4.2 教程-05:客户端代理(proxy)
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-5-client-proxy ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 ...
- [译]Vulkan教程(07)物理设备和队列家族
[译]Vulkan教程(07)物理设备和队列家族 Selecting a physical device 选择一个物理设备 After initializing the Vulkan library ...
- 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink
目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...
- ExtJS 4.2 教程-03:使用Ext.define自定义类
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-3-define-classes ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4. ...
- ExtJS 4.2 教程-01:Hello ExtJS
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-1-hello-extjs, 本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程07:UI》
概述: UI即User Interface(用户界面)的简称.UI设计是指对软件的燃机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅可以让游戏变得更有品位,更吸引玩家,还能充分体现开发者对游戏整 ...
- ExtJS 4.2 教程-08:布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
- ExtJS 4.2 教程-04:数据模型
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...
随机推荐
- Java编程的逻辑 (24) - 异常 (上)
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
- Java ArrayList中对象的排序 (Comparable VS Comparator)
我们通常使用Collections.sort()方法来对一个简单的数据列表排序.但是当ArrayList是由自定义对象组成的,就需要使用comparable或者comparator接口了.在使用这两者 ...
- Ubuntu编译gdb-ARM调试环境
参考Qt可用的gdb编译,以及交叉编译gdbserver,以及配置QtCreator远程调试 编译脚本 如下: #!/bin/bash echo -e "\033[32m 正在执行步骤一:检 ...
- 【BZOJ】4292: [PA2015]Równanie
题解 \(f(n)\)的取值范围最多\(9^2 * 18\) 直接枚举判断就好 代码 #include <bits/stdc++.h> #define fi first #define s ...
- 了解java内存模型,看这里就够了
转载请注明作者与出处 程序计数器 线程私有 因为物理cpu并不多,所以jvm是对java里面的线程进行不停的切换执行,因为切换的执行速度太快,所以我们看到是并发执行.所以jvm在切换线程执行后,如果要 ...
- P3905 道路重建
P3905 道路重建我一开始想错了,我的是类似kruskal,把毁坏的边从小到大加,并且判断联通性.但是这有一个问题,你可能会多加,就是这条边没用,但是它比较小,你也加上了.居然还有10分,数据也是水 ...
- jQuery-Selectors(选择器)的使用(二、层次篇)(转载)
原文:http://www.cnblogs.com/bynet/archive/2009/12/01/1614405.html 本系列文章导航 jQuery-Selectors(选择器)的使用(一.基 ...
- maven打包时包含本地jar
项目中需要使用maven的打包工具,生成zip压缩包,使用的插件是assembly-plugin.因为一些特殊的原因,需要使用一些本地的jar进行依赖,加载外部jar后编码过程中没有任何问题,但是打包 ...
- Java 发送http post 请求
package com.sm.utils; import java.io.BufferedReader; import java.io.InputStreamReader; import java.i ...
- Sublime快速入门
在当前的互联网时代,任何程序语言和相关技术都只是实现互联网应用的一种手段,这也就造成了大量的互联网工程师长期与不同的语言.技术.系统环境.IDE等打交道.因此一个相对统一方便的IDE对于程序员来说显得 ...