Ext--------------------部署

来源:互联网 发布:哪款抢票软件最好用 编辑:程序博客网 时间:2024/04/27 11:55

 

<!-- /* 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.2zip版本,解压后得到如下图的目录:


文件夹及文件说明:
   adapter
:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
   build
: 压缩后的ext全部源码(里面分类存放)
   docs
API帮助文档。
   exmaples
:提供使用ExtJs技术做出的小实例。
   resources
ExtUI资源文件目录,如CSS、图片文件都存放在这里面。
   source
: 无压缩Ext全部的源码(里面分类存放) 遵从LesserGNU 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.cssextjs js库文件主要包含两个,adapter/ext/ext-base.jsext-all.js,其中ext-base.js表示框架基础库,ext -all.jsextjs的核心库。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>
  
页面包含上述语句后,加入以下代码:
 <scripttype="text/javascript">
  function fn()
  { alert(
ExtJS库已加载!);
  }
  Ext.onReady(function ()
  {
  alert(
ExtJS库已加载!);
  }
  );
</script>
  
若成功弹出"EXT库已加载"对话框,那么恭喜你,表示ext已经正确加载了,接下来就开始感受ext的绚丽效果吧!

原创粉丝点击