新手指南--查看文章
 
开始ExtJS
发布时间:2008-3-6

转载:http://www.easyjf.com/

  ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用,下面是一些使用ExtJS开发的应用程序截图:

(wlr的blog应用)

(ExtJS的表格控件)

(不同主题的ExtJS弹出框效果)

  ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
  ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。



获得ExtJS

   要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址http://extjs.com/download,进入下载页面可以看到大致如图xxx所示的内容,可以选择选择1.1或2.0版本,本教程使用的2.0版本。

 

图1-1 ExtJs不同版本下载选择页面

  单击上图中的【Download ext-2.0.zip】超链接进行下载,把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下,可以得到如如图1-2所示的内容。

 

图1-2 ExtJS发布包目录

   adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
   build:  压缩后的ext全部源码(里面分类存放)。
   docs:  API帮助文档。
   exmaples:提供使用ExtJs技术做出的小实例。
   resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。
   source: 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议。
   Ext-all.js:压缩后的Ext全部源码。
   ext-all-debug.js:无压缩的Ext全部的源码(用于调试)。
  ext-core.js:压缩后的Ext的核心组件,包括sources/core下的所有类。
  ext-core-debug.js:无压缩Ext的核心组件,包括sources/core下的所有类。



应用ExtJS

  应用extjs需要在页面中引入extjs的样式及extjs库文件,样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext- all.js是extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype- adapter.js等。
  因此,要使用ExtJS框架的页面中一般包括下面几句: 

 

  在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:

 fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:


ExtJS版的Hello

下面我们写一个最简单的ExtJS应用,在hello.html文件中输入下面的代码:

    

   

   

   

   

   

   

   

   

   

   

 

图1-11  hello.html页面效果

  进一步,我们可以在页面上显示一个窗口,代码如下:

   在浏览hello.html,即可得在屏幕上显示一个窗口,如图xxx所示。

 

 


免费电影
设为首页
加入收藏
不吊线谷歌
©2008 MyExt.cn
本站文章来自互联网,仅供学习和研究使用,如有版权问题,请发送Email:myext@126.com.