Ext入门学习系列(一)环境配置
一、EXT是什么?
1. Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验;
2. Ext是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中;
3. Ext是面向对象的;
4. Ext没有你想象中的那么难;
二、Ext从哪里获取?
http://extjs.org.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的各个组件逐一介绍。
本例代码下载