Ext Direct -----javascript 与后台无缝融合_ext 版本如何跳过direct进入-CSDN博客

原文地址（推荐）：http://blog.csdn.net/jackieuni2011/article/details/6969945

第一次看到ext direct 时，就有一种高深慎入的踌躇。后来闲着DT，自己在网上看到了使用案例，于是开始自己试着能否快速搭建这样一个应用，让javascript从语法调用上直接使用后台语言编写的处理程序，天啊，这让newjser听起来好像是在开玩笑，而那些对js 的ajax 熟悉使用的使用者(尤其是 jquery的ajax使用者)一定会说：我们之前就是那么做的，你所说的direct也许不会有什么革新的。但是请记住了，direct的使用机制是包含语法糖的，通过简要声明直接调用服务端处理程序，还记得ext是怎么创建类的实例的时候是多么的难忘吗？

下面我们考虑一下使用jquery的ajax接口
我必须这样写：
   $.ajax({
     type:"post",
     url:"",//指定请求页面url 或请求的服务
    data:{key1:values,key2:value2,...},
    success：function(rs){do Something},
    fail：function(rs,error){do Something}
})

于是我开始想，越想越不爽：
1. 必须用ajax关键字来声明，瞧啊，我这是在使用ajax，我的每一个参数都有用处

2. 发送给服务器的数据使用了json化的参数，这是一个对象，其实这样很做好，但是如果请求的是web服务（webService.asmx/MethodName）,我还要用点心情去检测客户端和服务端对应的参数的名字是不是一样的（知道毕竟是2中语言编写的代码），这对有没有统一人格的人来说实在太痛苦了，而参数顺序也要求是一模一样的。

3. 如果成功，就返回结果通常按请求的对象可以分为文本类型和xml类型，这就意味着使用者必须分门别类来处理，但是返回xml的时候，要想获得数据得这么写：
   success：function(rs){
     var value= $(rs).text();//要获取的数据在rs节点text中包裹，要像吃栗子一样去掉外壳
   },
我喜欢吃栗子，但不是以多打些字作为交换

4. 上面一条说道是说道是如果成功，也就意味着可能失败，我们需要添加相应的处理措施
    看啊，为了安全又多了些代码........

5. 个人认为得写javascript的第一要求是想象力丰富，如果说之前编程丢弃了它，那么要学好js就得吧它捡回来；其次就是对括号的抵
抗能力，如果你没有这种能力，你可以把困难交给ide，但是它不会帮你排错。所以希望有种方法可以减少花括号，尤其是嵌套的花括号更应该避免

以上是为了抬高ext 的direct 而戏谑的一些话，下面来看看如何在asp.net 中使用direct，我会详细说明它的特性

如果会用ext（目前官方公布了ext4.2 beta），那么对如何在浏览器上编写像桌面应用程序一定不会太陌生
比如创建一个模态窗体：
Ext.create("Ext.window.Window",{
   width:450,
   height:400,
   resizable:false,
draggable:false,
modal:true
}).show();//这是Ext4+版本的写法（这里ext的语法糖实现了面向对象，这样写js很舒适）

为了确保已经搭建好了使用ext的环境，可以粘贴这段代码测试一下

我们只需要在平常使用ext的基础上再做以下工作
首先，下载官方的ext.direct.dll （网址：http://download.csdn.net/detail/piaolingzxh/3399865）
在asp.net web项目中引用这个动态链接库文件，成功后会看到Ext.Direct的命名空间

如下图：

         图片

然后添加一般处理程序文件，取名 PanelHandler.ashx(因为后面会用Panel面板来演示特性)

以下是 PanelHandler.ashx 的源码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Ext.Direct;

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

using System.Xml;

using System.IO;

namespace MyDerect.Panel

{

    /// <summary>

    /// PanelHandler 的摘要说明

    /// </summary>

    [DirectAction("Panel")]

    public class PanelHandler : DirectHandler

    {

        public override string ProviderName   /*提供者的名字，就是通过它来实现语言无缝衔接的，或者说是为了找到处理程序接口*/

        {

            get { return "Alex.Remote.PanelHandler"; }

        }

        public override string Namespace/*返回命名空间，通知js解释程序，我们使用的js调用方法是来自这个空间*/

        {

            get

            {

                return "Alex";

            }

        }

        [DirectMethod]

        public long Add(long a, long b)//这里是一个后台加法函数，本来没什么可说的，但是

        {                                               //如果你是非要用int 型的话，在js就会中报错，造成返回结果为undefined,本人在这里可纠结了不少时间

            return a + b;

        }

    }

}

好了，开始无缝连接吧，下面我连一句使用ajax的话都没说过，你却能默默享受使用它的乐趣

添加一个javascript文件panel.js

全部文代码如下

Ext.Direct.addProvider(Alex.Remote.PanelHandler);//也就是在这里我们隐式调用了ProviderName 的get方法，然后js就知道是那个处理程了

Ext.onReady(function () {

    var panel = Ext.create("Ext.panel.Panel", {

        title: "hello",

        height: 400,

        width: 500,

        collapsible: true,

        renderTo: Ext.getBody(),

        listeners: {

            render: function () {

                 Alex.Panel.Add(2, 4, function (data) {//这里的Alex是命名控件，后面Panel在PanelHandler.ashx中可

                    panel.html=data;                              //以 [DirectAction("Panel")]出发现到,这也是求其简约，必先攻难的原因.

                   panel.doLayout();//更新panel类容

                });//Add 是C#编写的方法，由于方法带返回值，使用时需要回调函数，这里匿名的function中的参数data就是结果

            } //end render

        }

    });

});
好了，我们在panel.htm中加入分离的代码，直接浏览panel.htm就可以看到panel中显示6，   漂亮。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Scripts/Ext4.0/resources/css/ext-all-gray.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/ext-all.js" type="text/javascript"></script>
   <script src="PanelHandler.ashx" type="text/javascript"></script>
    <script src="panel.js" type="text/javascript"></script>

</head>

<body>

</html>