在本文中，将探讨ExtJS框架的高级应用，特别是如何将其与ASP.NET WebService结合使用，以实现动态数据的绑定和自定义功能的实现。ExtJS是一个强大的JavaScript框架，用于构建交互式Web应用程序。它最初是由Jack Slocum作为YUI的扩展库构建的，但随着时间的推移，它已经发展成为一个独立的、不依赖于任何外部库的框架。
ExtJS的主要优势在于其快速原型制作和界面构建能力。通过定义一个数组，可以快速创建一个完全功能的界面，并且可以轻松地与其他管理器集成。此外，ExtJS提供了大量的可配置和可定制的小部件，通过面向对象的哲学，可以轻松地重用其他定义，节省了大量的工作。
尽管使用静态数据与ExtJS一起工作相对容易，但发现在使用动态数据时遇到了一些困难。因此，希望通过分享知识，帮助像这样的开发者更好地使用ExtJS。
ExtJS是一个纯粹的JavaScript应用程序框架，用于构建交互式Web应用程序。它使用Ajax、DHTML和DOM脚本等技术。ExtJS包括与jQuery和Prototype的互操作性。从1.1版本开始，ExtJS不再依赖外部库，而是使它们的使用成为可选的。
选择ExtJS的原因有很多，包括：
在本节中，将探讨如何将ExtJS数据网格与ASP.NETWebService绑定，并实现自定义功能。首先，需要创建一个用户控件，以便可以在需要时随时使用ExtJS网格，并且具有相同的功能。
为了使用ExtJS网格，需要添加一个CSS样式表和一个JavaScript文件作为引用。此外，还需要另一个引用（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来为网格提供数据。以下是是如何实现的：
[System.Web.Script.Services.ScriptService]
[WebMethod(EnableSession = true)]
public List<Record> LoadRecords()
{
// 返回对象列表
}
从WebMethod中，将返回一个对象列表，并将该对象与ExtJS数据网格绑定。需要按照以下三个步骤来实现它：
public class Record
{
public string FirstName;
public string LastName;
public string EmailAddress;
public int Salary;
}
Ext.define('Actors', {
extend: 'Ext.data.Model',
fields: ['FirstName', 'LastName', 'EmailAddress', 'Salary']
});
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' }
})
});
现在需要创建一个网格面板来以网格格式显示数据。以下代码显示了如何实现这一点：
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 = "";
} else {
link = value;
}
return link;
};
类似地，可以为浏览器制作电子邮件字段，使其对电子邮件友好。这意味着当用户点击电子邮件字段时，浏览器的内置弹出窗口将显示可用的电子邮件选项。以下是实现此功能的代码：
var Email_Rendered = function (value, p, record, rowIndex) {
var link;
link = "";
return link;
};
这是迄今为止工作的输出屏幕截图。
截图1：这是ExtJS数据网格的预期输出。
截图2：点击电子邮件地址时将出现此mailto选项。