Ext入门学习系列一、二、三

Ext入门学习系列一、二、三

Ext入门学习系列（一）环境配置

一、EXT是什么？

1. Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验；

2. Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中；

3. Ext是面向对象的；

4. Ext没有你想象中的那么难；

二、Ext从哪里获取？

http://www.myext.cn/从这里下载最新的3.3.0正式版压缩包，解压后得到如下图文件夹结构：

解压后有50M大小，里面包含了很多其他的文档。

三、Ext环境怎么搭建？

我们只需要从里面找出自己需要的文件即可。按照顺序在根目录下找到ext-all.js（最主要的Ext代码库文件），然后在adapter/ext/目录下找到ext-base.js（EXT的适配器），接下来就需要找语言文件了名字叫“ext-lang-zh_CN.js”，最后需要把整个样式表文件夹找到，在resources文件夹中。把所有找到的文件全部复制到我们需要的文件夹下，暂定为Ext文件夹，则该文件夹下面的目录结构应该如：

我们的站点文件放在上级目录，如：

到此为止，环境配置基本完毕。

四、Ext代码怎么写？

接下来我们一起来写一个测试例子，因为是JS库，所以网页中要做的第一件事情就是添加引用，在需要用到Ext的页面源文件头部加上：

<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> //引入样式 <script type="text/javascript" src="Ext/ext-base.js"></script>//引入适配器 <script type="text/javascript" src="Ext/ext-all.js"></script>//引入主文件 <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>//语言包

接下来才可以正式写，先来一个测试：

<script type="text/javascript"> function start(){ Ext.MessageBox.alert("测试","看我漂亮不!"); } Ext.onReady(start);//所有的程序都是从这里开始执行，里面写函数名 </script>

如果在VS2010中上面的代码是可以直接点出来的，所有代码以Ext开始，如果想弹个对话框，就选Message即可。

然后保存，运行正常情况下会出现这样的效果：

其中对话框默认是可以拖动的。

到此，我们的Ext环境就算搭建完毕！后续的课程会对Ext的各个组件逐一介绍。

本例代码下载

 

Ext入门学习系列（二）弹出窗体

第二章 弹出窗体

上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框，作为一个引子，本节讲述如何弹出一个新窗体，从实例讲解Ext的基本运行原理。

一、Ext的窗体长什么样？

先来看看几个效果，相信随着学习的深入，大家会被Ext的绚丽所征服。下面就是Ext弹出的几个基本窗体：

我们可以发现弹出的2个窗体比我们传统的网页漂亮多了，同时更有价值的是还能随意切换风格。那么类似于这种窗体到底是怎么弹出的呢？

二、Ext弹出窗体思路

在环境搭建正确的情况下，页面中引入也正确，就可以按照以下思路进行编写代码：

第一步：先搭建基本代码架子，如

< script type = " text/javascript " >  
function  start(){ 
// 这里写具体代码 
} 
Ext.onReady(start); // 入口函数 
< / script>

 

第二步：new对象，同时传入相应的参数。常见的参数有标题(title)，高(height)，宽(width)，内容(html)等。这些参数全部用花括弧括起来，各个参数中间用英文逗号隔开。参考代码如下：

var  win  =   new  Ext.Window();

 

之后在构造函数中传入参数：

var  win  =   new  Ext.Window({ title:  " 测试标题 " , height:  300 , width:  500 , html:  " <h1>测试内容</h1> "  });

 

说明：其中html 属性是可以写和解析html标签的，可以在里面修饰字体等。

最后，让这个窗体对象显示出来，调用他的show()方法：

win.show();

 

然后，运行网页，得到的效果如下：

，这个窗体默认是可以拖动的，拖动默认效果是有阴影和背景变色功能的。本例完整代码下如：

代码

< HTML >  
< HEAD >  
< TITLE > 弹出窗体 </ TITLE >  
< link  rel ="stylesheet"  type ="text/css"  href ="Ext/resources/css/ext-all.css"   />  
< script  type ="text/javascript"  src ="Ext/ext-base.js" ></ script >  
< script  type ="text/javascript"  src ="Ext/ext-all.js" ></ script >  
< script  type ="text/javascript"  src ="Ext/ext-lang-zh_CN.js"  charset ="utf-8" ></ script >  
</ HEAD >  
< script  type ="text/javascript" >  
function  start(){ 
var  win  =   new  Ext.Window({ title:  " 测试标题 " , height:  300 , width:  500 , html:  " <h1>测试内容</h1> "  }); 
win.show(); 
} 
Ext.onReady(start); // 程序入口 
</ script >  
< BODY >  
</ BODY >  
</ HTML >

 

三、总结：

WINDOW对象是一种特殊的面板,专用于程序中的"视窗"（window）。Windows默认下是 可拖动的、浮动的，并提供若干特定的行为如：最大化、复原、事件。还有很多其他的属性和事件，本章暂时不做详述，由于课程刚刚开始，后面会提供API文档，大家使用到了可以参考，实现功能更加强大的弹出窗体。
本章代码下载

 

Ext入门学习系列（三）复杂自定义窗体

通过前2节的学习，基本掌握了Ext的语法和运行原理，可以作出一些简单的应用。本节我们一起来完成复杂点的对话框操作，因为在实际项目中经常要用到确认对话框等多种操作，然后根据客户的选择作出不同的响应。

一、常见的复杂对话框

常见的复杂点的确认对话框有这么几种，如下图：

效果一：选择确认

效果二：反馈对话框

效果三：多行文本反馈确认

效果四：多按钮选择

效果五：进度条

二、Ext弹出窗体思路

效果一

如上图效果一，是一个很简单的选择确认对话框，弹出的思路也比较简单，和传统的JS一样使用的是Confirm函数，但是在Ext中这些对话框被统一归结到Message下面。所以实现起来只有一句话：“Ext.MessageBox.confirm("选择框","你到底是选yes还是no?");”，第一个参数是对话框的标题，后面是对话框消息正文。

全部代码如下：

< script type = " text/javascript " >  
function  start(){ 
Ext.MessageBox.confirm( " 选择框 " , " 你到底是选yes还是no? " ); 
} 
Ext.onReady(start); 
< / script>

 

如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的退出按钮)，所单击按钮的id将被作为唯一的参数传递到回调函数中。使用方法是在confirm的参数第三个位置加上回调函数名，然后下面完成这个回调函数，定义一个参数接收用户的选择结果，然后可以根据选择来作出判断，全部代码如下：

< script type = " text/javascript " >  
function  start(){ 
Ext.MessageBox.confirm( " 选择框 " ,  " 你到底是选yes还是no? " , callback); 
function  callback(id) { 
Ext.MessageBox.alert( " 提示 " , " 你选择的是: " + id); 
} 
} 
Ext.onReady(start); 
< / script>

 

再复杂点的判断可以使用JS原生的语法进行判断，如：

< script type = " text/javascript " >  
function  start(){ 
Ext.MessageBox.confirm( " 选择框 " ,  " 你到底是选yes还是no? " , callback); 
function  callback(id) { 
if  (id  ==   " yes " ) { 
Ext.MessageBox.alert( " 提示 " , " 你点了确定 " ); 
}  else  { 
Ext.MessageBox.alert( " 提示 " ,  " 你点了取消? " ); 
} 
} 
} 
Ext.onReady(start); 
< / script>

 

效果二

效果二完成的是一个带输入的确认对话框，用的是prompt，和上个效果一样，也需要定义回调函数用来接收用户操作的结果，同时还有用户输入的内容。本例完成一个请求用户输入，如果输入并点击了“确定”则弹出提示“你输入的是…”，而如果没有输入直接取消了，就弹出“你取消了输入！”，完整代码如下：

< script type = " text/javascript " >  
function  msg() { 
Ext.MessageBox.prompt( " 提示 " ,  " 随便写点什么吧！ " , callback); 
function  callback(id, text) { 
if  (id  ==   " ok " ) { 
Ext.MessageBox.alert( " 提示 " , " 你输入的是?： "   +  text); 
}  else  { 
Ext.MessageBox.alert( " 提示 " , " 你已经取消了输入！ " ); 
} 
} 
} 
Ext.onReady(msg); 
< / script>

 

效果三

带多行文本输入框的对话框，这个例子实现思路需要变化一下，使用自定义对话框，原因是原生JS中本来就没有多行文本框这一说。而且接收返回值的思路需要变化。具体代码如：

< script type = " text/javascript " >  
function  msg() { 
Ext.MessageBox.show({ 
title:  ' 标题 ' , msg:  ' 要显示的内容 ' , 
width:  300 , buttons: Ext.MessageBox.OKCANCEL, 
multiline:  true , 
fn: callback // 这个是Ext专属属性，用来指示处理函数名 
}); 
function  callback(id, text) { 
Ext.MessageBox.alert(text); 
} 
} 
Ext.onReady(msg); 
< / script>

 

本例判断省略，和上个例子判断思路一致。

效果四

这个效果是可以显示多个按钮供客户选择，用于多条件处理的情况。

< script type = " text/javascript " >  
function  msg() { 
Ext.MessageBox.show({ 
title:  ' 标题 ' , msg:  ' 要显示的内容 ' , 
buttons: { yes:  true , no:  true , cancel:  true  }, 
//  buttons: { yes: "是啊", no: "不啊", cancel: "取消了啊" }, 
fn: callback // 这个是Ext专属属性，用来指示处理函数名 
}); 
function  callback(id) { 
Ext.MessageBox.alert( " 提示 " , " 你选择的是 " + id); 
} 
} 
Ext.onReady(msg); 
< / script>

 

效果五

关于进度条，有两种实现思路，一是按大小确定，一是按时间确定。本例完成按大小控制进度条，完整代码如下：

< script type = " text/javascript " >  
function  msg() { 
Ext.MessageBox.show({ 
title:  ' 请稍等 ' , 
msg:  ' 加载中... ' , 
width:  300 , 
progress:  true , 
closable:  false  
}); 
var  f  =   function  (v) { 
return   function  () { 
if  (v  ==   12 ) { 
Ext.MessageBox.hide(); 
Ext.MessageBox.alert( ' 完成 ' ,  ' 加载完毕! ' ); 
}  else  { 
var  i  =  v  /   11 ; 
Ext.MessageBox.updateProgress(i, Math.round( 100   *  i)  +   ' % 已经完成！ ' ); 
} 
}; 
}; 
for  ( var  i  =   1 ; i  <   13 ; i ++ ) { 
setTimeout(f(i), i  *   500 ); 
} 
} 
Ext.onReady(msg); 
< / script>

 

本例进度条是模拟操作，在具体项目中，如文件上传需要实时判断，在后续的课程中详细探讨，进度条不是今天的重点，今天重点讲述自定义对话框的用法。

三、总结：

自定义对话框可以帮助我们完成一些相对复杂的操作，比如获取用户的选择等，另外，自定义对话框也可以定义对话框的图标，只需要加上：“icon:Ext.MessageBox.INFO,//显示图标”，即可。同时也可以自定义图标，显示成你需要的图片，如下效果：

实现思路是：

1. 先定义一个类样式，指定背景图片地址和不平铺；

2. 在icon属性中引入类样式名；