我在项目中经常使用jquery，这次主要学习使用extjs，但是现有教程基本都是针对2.0的，后台使用的语言很少是C#下的。net平台，所以打算用C#在后台进行3.0版本，并记录下自己的学习过程，希望能和志同道合的朋友一起探讨，共同进步。ext的官方网站是http://www.extjs.com。目前最高版本是3.0.2，但只有3.0.0没有下载限制。你可以点击这里下载3.0版本。下载的压缩包包含压缩的extjs库、调试中使用的库、可读的源代码、文档和示例。在开始之前，您不妨先看看examples文件夹中的示例，并对extjs有一个感性的了解。如果你认为例子中的效果让你感到兴奋，那就一起开始extjs的学习之旅吧。首先明确我们需要参考的文件，包括adpter/ext/ext-base-debug.js、ext-all-debug.js和整个资源文件夹。当然，在大多数情况下，我们还需要ext-lang-zh_CN.js进行中文本地化，它位于src/locale目录中。因为是学习阶段，所以使用调试版本。在实际项目中，发布时应使用压缩版本来减小文件大小。接下来，我们将遵循编程的传统，开始我们的第一个Hello world程序。新建一个文本文件，将文件名改为Hello.htm，用文本编辑器打开，写下如下代码：Hello.htm复制代码如下： html hearteta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/title extjs hello world dialog/title link rel='样式表' type=' text/CSS ' href=' extjs/resources/CSS/ext-all . CSS '/脚本类型=' text/JavaScript ' src=' http : extjs/ext-base-debug . js '/脚本类型=' text/JavaScript ' src=' http : extjs/ext-all-debug . js '/脚本脚本脚本用ie或者ff打开Hello.htm，可以看到弹出的对话框，和js的提醒对话框一样，但是漂亮多了。让我们看看代码。在html页面中，我们首先参考extjs的相关库文件，注意参考顺序。然后我们参考我们自己的js文件。简单看一下，Ext.onReady是在文档加载后触发的，它有一个参数是一个函数类型，在事件启动时调用。这里我们使用匿名函数，但是当然我们可以在外部定义函数，然后将函数的名称作为参数传递。延伸文件系统MessageBox.alert是一个弹出消息的对话框功能。第一个参数是标题，第二个参数是对话框的内容。在分机下。消息类，还有一种模拟js的提示对话框和确认对话框的方法。我们换daben.js看看confirm方法的效果：复制代码如下： ext . onready(function(){//ext . messagebox . alert(' information '，' Hello world ')；ext . messagebox . confirm(' confirm '，'模拟js的confirm对话框'，function(btn){ alert ('btn '按钮已单击')；});});

光看对话框不是很有意思。在实际的web程序中，需要向服务器提交数据，并根据服务器的响应更新页面内容。让我们看看extjs是如何实现的。在下面的示例中，我们将在页面上放置一个编辑框和一个按钮。单击按钮后，服务器将编辑框中输入的内容转换为大写，并在页面的div中显示。打开vs2008，创建一个新的web应用程序ExtjsDemo，并删除自动添加的default.aspx文件。添加我们的hello.htm和daben.js文件以及我们将使用的extjs库，如图添加后的图所示：。

可以看到在js目录的底部添加了一个vvswd-ext_2.0.2.js文件，可以从这里下载。这个文件可以实现vs2008对extjs库的智能提示，方便编程(但是3.0版本我找不到，有朋友发现麻烦，给我发一份)。首先，让我们看一个函数Ext。extjs中实现与服务器通信的Ajax.request。这个函数接受一个json对象作为参数。这个对象有几个： url:字符串类型的常用属性，指示请求的地址。params:是请求时传递给服务器段的参数，可以是一个对象。Method:请求的方法，字符串类型，“GET”或“POST”，注意它必须是大写的success:函数类型，它将在请求成功后执行。这个函数有一个参数，它是一个包含服务器端响应数据的XMLHttpRequest对象failure:函数类型，还有一个在请求失败后执行的函数。该函数有一个参数，它是一个包含服务器端响应数据的XMLHttpRequest对象callback:函数类型，无论请求的结果如何，它都会很好地执行。让我们具体看看extjs是如何与服务器交互的。对我们的hello.htm页面进行以下更改：复制代码如下： html head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/title extjs hello world dialog/title link rel='样式表' type=' text/CSS ' href=' extjs/resources/CSS/ext-all . CSS '/脚本类型=' text/JavaScript ' src=' http : extjs/ext-base-debug . js '/脚本类型=' text/JavaScript ' src=' http : extjs/ext-all-debug . js '/脚本脚本脚本修改后的代码如下：复制代码如下：///引用路径=' vswd-ext _ 2 . 0 . 2 . js '/* */* *作者：大本*日期：2009年10月10日*版本：1.0 */ext.onReady(函数(。/* */* ext . messagebox . confirm(' confirm '，'模拟js的confirm对话框')，function(btn){ alert ('btn按钮被点击')；});*/Ext.get('btn ')。on('click '，function(){ var data=Ext . fly(' txt ')。getValue()；If (data=='') {Ext。Msg.alert ('warning '，'请输入字符串')；} else { Ext。Ajax . request({ URL : ' hello . aspx '，params: { data: data }，method: 'POST '，success:函数(response) { Ext.fly('div ')。update(response . response text)；}，failure : function(response){ ext . msg . alert(' error '，' request failed，错误码为：' response . status ')；} });} });});先简单分析一下这个文件：第一行是vs的智能提示，注意写路径要正确，必须加到第一行。Ext.onReady已经引入。Ext.fly是Ext的缩写。这个方法可以根据id获取元素对象。元素类是Ext中非常重要的类，封装了Dom，增加了一些操作方便使用，兼容主流浏览器。GetValue是Element类的一个方法，它获取元素的值。比较郁闷的是没有对应的setValue方法，所以用update方法来更新元素的值。在将值传递给服务器之前验证客户端是一个很好的编程习惯。这里，我们简单地验证字符串不是空的，然后使用Ext。前面提到的Ajax.request方法。我们使用这种方法将数据以post的形式发送到hello.aspx页面。我们以json对象的形式发送到这里，也可以以字符串的形式编写。对于成功的响应，响应的文本显示在div中，对于失败的响应，弹出一个对话框。接下来，我们需要在服务器端编程。服务器可以接受来自客户端的数据，并以两种方式做出响应：使用aspx页面和web服务。我们首先介绍如何使用aspx页面进行处理。

向项目中添加一个Hello.aspx页面，并删除除第一行% @以外的所有页面处理指令page language=' c# ' autoeventreut=' true ' code behind=' hello . aspx . cs ' inherits=' ext jsdemo . hello ' %。按F7切换到代码页，开始编写背景代码。首先，我们通过请求从前台获取数据。参数['数据']。同样，在处理数据之前，我们首先验证数据的有效性。这里，我们简单地判断它是空的还是空字符串，然后通过Response将处理后的结果发送给客户端。写后台代码如下：复制代码如下：使用System/* */* *作者：大本*日期：2009-10-10 *版本：1.0 */命名空间ext js demo {公共分部类hello :系统。web . ui . page { page load # region page load/* */////Summary///page loading////Summary///param name=' sender '/param///param name=' e '/param protected void page _ load(object sender，eventargs e){ string data=request . params[' data ']；if(！字符串。IsNullOrEmpty(数据)){响应。写(数据。ToUpper())；}} #endregion}}运行后，在编辑框中输入字符串，可以看到它在下面的div中以大写显示。我们可以通过FF的Firebug看到数据交互。除了使用aspx页面接收和处理来自客户端的数据，我们还可以使用web服务。使用以下代码向项目添加web服务：复制代码如下：使用System :使用系统。网络服务；/* *//* *作者：大本*日期：2009-10-10 *版本：1.0 */Namespace ext js demo {/* *///Summary///Hello Service的概要描述////Summary[web Service(Namespace=' http://tempuri . org/')][WebServiceBinding(ConformsTo=WsiProfiles。basicprofile 1 _ 1)][系统。component model . toolbox item(false)]//要允许使用ASP.NET Ajax从脚本中调用此Web服务，请取消对以下行的注释。//[系统。web . script . services . script service]公共类helloservice:系统。web . services . web service {将传入字符串更改为大写#region将传入字符串更改为大写//* */////Summary////将传入字符串更改为大写/////Summary//param name=' data '字符串要转换为大写/param////返回大写字符串/返回[web方法]公共字符串to pper(string data){ if(！字符串。IsNullOrEmpty(data))返回数据。Toupper()；引发新异常('字符串不能为空！');} #endregion}}当然，默认情况下，web服务以xml格式传输数据，我们可以通过Firebug看到这一点。Xml非常好，功能强大，但是有时候我们只需要更小的json，那么如何让web服务交付json格式呢？我们只需要将请求头中的Content-Type设置为application/json，并用Ext.util.JSON.encode对参数进行编码，或者使用jsonData代替params。