<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->
部署ext
下面介绍下如何部署ext 到自己的项目中,通过本节的了解,您就可以开始利用ext 制作各种个样的绚丽效果了。要使用ExtJS ,那么首先要得到ExtJS 库文件,该框架是开源且可以自由发布的。可以直接从官方网站下载,网址http://extjs.com/download ,进入下载页面可以看到如下图所示内容,本教程使用的2.x 版本。 我们下载2.0.2 的zip 版本,解压后得到如下图的目录:
文件夹及文件说明:
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 库文件,样式文件为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 框架的页面中一般包括下面几句:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
页面包含上述语句后,加入以下代码:
<script type="text/javascript">
function fn()
{ alert( ‘ExtJS 库已加载! ’);
}
Ext.onReady(function ()
{
alert( ‘ExtJS 库已加载! ’);
}
);
</script>
若成功弹出"EXT 库已加载" 对话框,那么恭喜你,表示ext 已经正确加载了,接下来就开始感受ext 的绚丽效果吧!