65.9K
CodeProject 正在变化。 阅读更多。
Home

ExtJS 与 WebService

dpalash
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (14投票s)

2013 年 5 月 27 日

CPOL

5分钟阅读

viewsIcon

72693

downloadIcon

1890

在本文中，我分享了使用 ExtJS 和 Webservice 的方法。

引言

本文仅献给那些在使用 ExtJS 时遇到困难或刚开始接触 ExtJS 的初学者。  在本文中，我将展示几种使用 Ext 的有用方法。希望它能帮助初学者，并鼓励他们更多地使用 ExtJS。在开始之前，我们需要了解什么是 ExtJS 以及为什么要在我们的项目中使用 ExtJS。 

关于 ExtJS 

ExtJS  是一个纯 JavaScript 应用程序框架 ，用于使用 Ajax、DHTML 和 DOM 脚本等技术构建交互式 Web 应用程序。Ext JS 最初是 Jack Slocum 作为 YUI 的一个附加库扩展而构建的，它包括与 jQuery 和 Prototype 的互操作性。从版本 1.1 开始，ExtJS 不再依赖于外部库，而是将它们的使用设为可选。 

为什么使用 ExtJS

  1. 快速原型设计和界面构建。只需定义（基本上）一个大数组，您就拥有了一个功能齐全的界面，并且与管理器其余部分完全融合。 
  2. 包含大量可无限配置和自定义的小部件。 
  3. 通过其面向对象的理念，您可以以面向对象的方式轻松重用其他定义，并节省大量工作。定义一个小部件一次，到处使用。 
  4. ExtJS 可以在不同浏览器中实现功能并使其外观精美。  

使用静态数据与 ExtJS 配合使用非常简单，但我发现使用 ExtJS 网格处理动态数据时遇到了一些困难，因为我以前没有这方面的经验。所以我想，如果我将我的知识分享给大家，可能会对像我一样的开发者有所帮助。 

目标

本文的目标是分享我使用 ExtJS 网格和 WebService 的方法。我将把 ExtJS 数据网格与 asp.net WebService 绑定，并在 ExtJS 网格上实现自定义功能。 

我附带了一个示例项目供下载。您可以下载示例并查看代码。这有助于您更好地理解过程。 

源代码说明 

在我的示例项目中，我使用了一个用户控件，以便我可以随时随地使用我的 extjs 网格，并具有相同的功能。  ExtJS 网格所需的脚本和样式位于我的用户控件中。我们需要添加一个 css 样式表和一个 JavaScript 文件作为引用来使用 extjs 网格。此外，我们还需要另一个引用
(AspWebAjaxProxy.js)，用于使用 WebService。 

以下是引用 

 <link href="../ExtJsScripts/ext-all.css" rel="stylesheet" type="text/css" /> 
<asp:ScriptManager ID="PageScriptManager" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/ExtJsScripts/ext-all-debug.js" />
        <asp:ScriptReference Path="~/ExtJsScripts/Ext.ux.AspWebAjaxProxy.js" />
    </Scripts>
</asp:ScriptManager>

现在我们需要一个 WebService 来为网格提供数据。我是这样做的。 

*** 您需要确保取消注释您的 WebService 中的以下行，以便可以通过 ASP.NET AJAX 从脚本调用此 WebService。 

[System.Web.Script.Services.ScriptService]

*** 如果您需要在应用程序中使用会话，则需要添加 

[WebMethod(EnableSession = true)]
替换您 WebMethod 的 [WebMethod]。否则，您将在每次调用 WebMethod 时获得会话变量的 null 值。

从我的 WebMethod 中，我正在返回一个对象列表，并将该对象与我的 ExtJS 数据网格绑定。您需要遵循以下三个步骤来完成此操作。 

步骤 1：我们在 WebService 中有一个公共类。这是我的类的结构。 

   public class Record
   {
     public string FirstName;
     public string LastName;
     public string EmailAddress;
     public int Salary;
   }

步骤 2：我需要在 Ext.define 方法中定义字段。这是代码。 

Ext.define('Actors', {
            extend: 'Ext.data.Model',
            fields: ['FirstName', 'LastName', 'EmailAddress', 'Salary']
        });

这里的 FirstName、LastName、EmailAddress 和 Salary 是我之前定义的类的字段。

步骤 3：现在我们需要从我们的 WebService 创建 Ext.data.Store。这是我调用我的 WebService 的 WebMethod 的方法。  

var store = new Ext.data.Store(
            {
                proxy: new Ext.ux.AspWebAjaxProxy({
                    url: '../App_Services/WebService1.asmx/LoadRecords',
                    actionMethods: {
                        read: 'POST'
                    },
                    reader: {
                        type: 'json',
                        model: 'Actors',
                        root: 'd'
                    },
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                })
            });

步骤 4：现在我们需要创建一个网格面板以网格格式显示数据。以下代码显示了如何实现这一点。 

var grid = Ext.create('Ext.grid.Panel', {
           store: store,
           stateful: true,
           stateId: 'stateGrid',
           columns: [
           { text: 'FirstName', dataIndex: 'FirstName', renderer: FirstName_Rendered, width: 280, sortable: true },
           { text: 'LastName', dataIndex: 'LastName', sortable: true },
           { text: 'EmailAddress', dataIndex: 'EmailAddress', renderer: Email_Rendered, width: 150, sortable: true },
           { text: 'Salary', dataIndex: 'Salary', renderer: 'usMoney', sortable: true }
               ],
           ctCls: 'x-custgrid3-row',
           renderTo: 'ext-grid'
        });

在这里，我们可以看到我们需要定义列名和 dataIndex，这与创建 Ext.data.Store 的类字段类似。Ext.data.Store 的字段和我的列的 dataIndex 如上所示。

我们现在只需要创建一个 div，给它一个 id，然后渲染网格。我们只需要在创建网格时将该 div 的 id 放在
"renderTo" 属性中。`renderTo` 属性是上面代码的最后一行。

现在我们完成了。我们的用户控件现已准备就绪。我们现在可以通过将用户控件拖放到默认页面上来将其放置在页面上。如果我们现在在浏览器中查看页面，我们将能够看到具有正确数据的网格。 

现在出现了另一个需求，我们想链接我们的名字。我们想让我们的名字成为可链接的，以重定向到一个新页面。我们可以非常轻松地做到这一点。我们只需要在创建网格时调用该函数。在我上面的代码中，您可以看到我有一个名为“renderer”的属性。此属性调用它作为名称的 JavaScript 函数。例如 

renderer: FirstName_Rendered

调用 FirstName_Rendered 函数。这是 FirstName_Rendered 函数的详细代码。 

var FirstName_Rendered = function (value, p, record, rowIndex) {
            var link;
            if (value == "Palash") {
                link = "<a href='http://www.google.com'>" + value + "</a>";
            } else {
                link = value;
            }
            return link;
        };

同样，我们可以使网格的电子邮件字段对浏览器更友好。电子邮件友好意味着当用户单击电子邮件字段时，浏览器内置的弹出窗口将出现，其中包含可用的电子邮件选项。这是实现此目的的代码。 

var Email_Rendered = function (value, p, record, rowIndex) {
            var link;
            link = "<a href='mailto:" + value + "'>" + value + "</a>";
            return link;
        };

这是到目前为止我们工作的输出截图。

截图 1：这是 ExtJS 数据网格的预期输出。

截图 2：单击电子邮件地址时会出现此 mailto 选项。

 

这就是我用 extjs 网格完成的所有工作。如果我的文章能帮到您一点，我将非常高兴。在结束之前，我想说我完全同意“Mark Hamstra”的说法：“我喜欢 ExtJS 做的事情，但我讨厌它做事情的方式。”  

感谢您的阅读，祝您编码愉快 Smile | :)

© . All rights reserved.