Ext入门学习系列(一)环境配置

99封情书 提交于 2020-02-07 03:45:46

 

一、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正式版压缩包,解压后得到如下图文件夹结构:

clip_image002

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

三、Ext环境怎么搭建?

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

clip_image004

我们的站点文件放在上级目录,如:

clip_image006

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

四、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即可。

clip_image008

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

clip_image010

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

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

本例代码下载

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!