extjs学习札记（一）
日期：2014-05-16 浏览次数：20461 次
extjs学习笔记（一）
extjs学习笔记（一） 一些基础知识
相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。我在项目中已经频繁使用了jquery，这次主要是学习使用extjs，但现有的教程基本都是针对2.0的，而且后台用到的语言也很少是.net平台下的C#，所以我打算针对3.0版，后台使用C#，记录下自己的学习过程，希望能和志同道合的朋友一起探讨，共同进步。
extjs的官方网站是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和整个resource文件夹，当然，多数情况下，我们还需要ext-lang-zh_CN.js进行中文的本地化，该文件在src/locale目录下。因为是学习阶段，所以我们使用了debug版本，在实际的项目中，发布的时候要使用压缩后的版本以减小文件体积。接下来，我们就秉承编程界的一贯传统，开始我们的第一个Hello world程序。
新建一个文本文件，文件名改为Hello.htm，用文本编辑器打开，写下如下代码：
Hello.htm
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4<title>Extjs hello world dialog</title>
5<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6<script type="text/javascript" src="extjs/ext-base-debug.js"></script>
7<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
8<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9<script type="text/javascript" src="js/daben.js"></script>
10</head>
11<body>
12<div id="hello"></div>
13</body>
14</html>
daben.js的内容如下：
1/**//*
2 *作者：大笨
3 *日期：2009-10-10
4 *版本：1.0
5 *博客地址：http://yage.cnblogs.com/
6 */
7Ext.onReady(function(){
8 Ext.MessageBox.alert("信息","Hello world");
9});
使用ie或者ff打开Hello.htm，可以看到一个弹出的对话框，和js的alert对话框一样，但是漂亮了许多。
我们看看代码，在html页面中首先引用extjs的相关库文件，注意引用顺序，接下来是引用我们自己的js文件。我们简单看下，Ext.onReady是在文档加载完之后触发的，它有一个参数是一个函数类型，该函数在事件出发的时候被调用。在这里我们用了匿名的函数，当然也可以把函数在外部定义好，然后把函数的名字作为参数传递进来。Ext.MessageBox.alert是一个弹出消息的对话框函数，第一个参数是标题，第二个参数是对话框的内容。Ext.Message类下还有模拟js的prompt对话框和comfirm对话框的方法，我们改动下daben.js看看confirm方法的效果：
Code
1/**//*
2 *作者：大笨
3 *日期：2009-10-10
4 *版本：1.0
5 *博客地址：http://yage.cnblogs.com/
6 */
7Ext.onReady(function(){
8 //Ext.MessageBox.alert("信息","Hello world");
9 Ext.MessageBox.confirm("comfirm","模拟js的comfirm对话框",function(btn){
10 alert("点击了"+btn+"按钮");
11 });
12});
光看对话框并不是很有趣，实际的web程序中，需要向服务器提交数据并根据服务器的响应来更新页面中的内容，我们来看看extjs是如何实现的。下边的例子中，我们将在页面上放置一个编辑框和一个按钮，当点击按钮之后，服务器将编辑框中输入的内容转化为大写并显示在页面的一个div中。打开vs2008，新建一个web应用程序ExtjsDemo，删掉自动添加的default.aspx文件。添加我们的hello.htm和daben.js文件以及我们要用到的extjs库，添加完成后如图所示：
可以看到在js目录下边，加了一个vvswd-ext_2.0.2.js的文件，从这里可以下载，这个文件可以实现vs2008对于extjs库的智能提示，方便编程（不过我没找到针对3.0版的，如果哪位朋友找到了麻烦发一份给我）。我们先来看下extjs中实现和服务器端通信的一个函数Ext.Ajax.request，该函数接受一个json对象作为参数，该对象有几个常用的属性:
url:字符串类型，指明请求的地址
params:请求时传递给服务器段的参数，可以是对象，字符串
method:请求的方法，字符串类型，“GET"或者"POST"，注意必须是大写的
success:函数类型，请求成功后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
failure:函数类型，请求失败后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
callback:函数类型，无论请求的结果如何都会执行
好，我们就具体来看看extjs是如何实现和服务器端的交互吧。先把我们的hello.htm页面做如下改动：
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4<title>Extjs hello world dialog</title>
5<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6<script type="text/javascript" src="extjs/ext-base-debug.
extjs学习笔记（一） 一些基础知识
相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。我在项目中已经频繁使用了jquery，这次主要是学习使用extjs，但现有的教程基本都是针对2.0的，而且后台用到的语言也很少是.net平台下的C#，所以我打算针对3.0版，后台使用C#，记录下自己的学习过程，希望能和志同道合的朋友一起探讨，共同进步。
extjs的官方网站是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和整个resource文件夹，当然，多数情况下，我们还需要ext-lang-zh_CN.js进行中文的本地化，该文件在src/locale目录下。因为是学习阶段，所以我们使用了debug版本，在实际的项目中，发布的时候要使用压缩后的版本以减小文件体积。接下来，我们就秉承编程界的一贯传统，开始我们的第一个Hello world程序。
新建一个文本文件，文件名改为Hello.htm，用文本编辑器打开，写下如下代码：
Hello.htm
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4<title>Extjs hello world dialog</title>
5<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6<script type="text/javascript" src="extjs/ext-base-debug.js"></script>
7<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
8<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9<script type="text/javascript" src="js/daben.js"></script>
10</head>
11<body>
12<div id="hello"></div>
13</body>
14</html>
daben.js的内容如下：
1/**//*
2 *作者：大笨
3 *日期：2009-10-10
4 *版本：1.0
5 *博客地址：http://yage.cnblogs.com/
6 */
7Ext.onReady(function(){
8 Ext.MessageBox.alert("信息","Hello world");
9});
使用ie或者ff打开Hello.htm，可以看到一个弹出的对话框，和js的alert对话框一样，但是漂亮了许多。
我们看看代码，在html页面中首先引用extjs的相关库文件，注意引用顺序，接下来是引用我们自己的js文件。我们简单看下，Ext.onReady是在文档加载完之后触发的，它有一个参数是一个函数类型，该函数在事件出发的时候被调用。在这里我们用了匿名的函数，当然也可以把函数在外部定义好，然后把函数的名字作为参数传递进来。Ext.MessageBox.alert是一个弹出消息的对话框函数，第一个参数是标题，第二个参数是对话框的内容。Ext.Message类下还有模拟js的prompt对话框和comfirm对话框的方法，我们改动下daben.js看看confirm方法的效果：
Code
1/**//*
2 *作者：大笨
3 *日期：2009-10-10
4 *版本：1.0
5 *博客地址：http://yage.cnblogs.com/
6 */
7Ext.onReady(function(){
8 //Ext.MessageBox.alert("信息","Hello world");
9 Ext.MessageBox.confirm("comfirm","模拟js的comfirm对话框",function(btn){
10 alert("点击了"+btn+"按钮");
11 });
12});
光看对话框并不是很有趣，实际的web程序中，需要向服务器提交数据并根据服务器的响应来更新页面中的内容，我们来看看extjs是如何实现的。下边的例子中，我们将在页面上放置一个编辑框和一个按钮，当点击按钮之后，服务器将编辑框中输入的内容转化为大写并显示在页面的一个div中。打开vs2008，新建一个web应用程序ExtjsDemo，删掉自动添加的default.aspx文件。添加我们的hello.htm和daben.js文件以及我们要用到的extjs库，添加完成后如图所示：
可以看到在js目录下边，加了一个vvswd-ext_2.0.2.js的文件，从这里可以下载，这个文件可以实现vs2008对于extjs库的智能提示，方便编程（不过我没找到针对3.0版的，如果哪位朋友找到了麻烦发一份给我）。我们先来看下extjs中实现和服务器端通信的一个函数Ext.Ajax.request，该函数接受一个json对象作为参数，该对象有几个常用的属性:
url:字符串类型，指明请求的地址
params:请求时传递给服务器段的参数，可以是对象，字符串
method:请求的方法，字符串类型，“GET"或者"POST"，注意必须是大写的
success:函数类型，请求成功后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
failure:函数类型，请求失败后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
callback:函数类型，无论请求的结果如何都会执行
好，我们就具体来看看extjs是如何实现和服务器端的交互吧。先把我们的hello.htm页面做如下改动：
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4<title>Extjs hello world dialog</title>
5<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6<script type="text/javascript" src="extjs/ext-base-debug.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
