ExtJS 学习专题（一） 如何应用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的样式及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.html文件中输入下面的代码：
看一下页面效果：
进一步，我们可以在页面上显示一个窗口，代码如下：
在浏览hello.html，即可得在屏幕上显示一个窗口，如图所示：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAppTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ExtJS World</title>
<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>
Ext.onReady(function () {
//弹出警告对话框.
//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!");
//弹出Window窗体.
var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' });
win.show();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
这只是一个简单的实例，要想做出复杂的功能还需要学习很多知识，在下一篇文章中将介绍ExtJS类库和组件介绍，希望大家继续关注我的博客！
相关文章
ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。2009-04-04
ExtJS Ext.MessageBox.alert()弹出对话框详解
Ext.MessageBox是一个工具类，他继承自Obiect对象，用来生成各种风格的信息提示对话框，Ext.Msg是该类的别名，使用Ext.MessageBox和用Ext.Msg效果是一样的，而后者提供了更简单的方式。2010-04-04
ExtJS 中Window的窗口最大化只需将maximizable属性设置为true即可，点击最大化按钮就可以将窗体最大化，最小化的操作类似将minimizable设置为true，即可以看到窗体的最小化按钮，但是点击此按钮并不会出发任何操作，Ext没有为窗口预设最小化的任何操作，需要自己自定义最小化功能。2009-11-11
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Extjs中TabPane在一些特殊用途时把其嵌在其他的网页中，很多新手朋友可能对此不是很熟悉，小编就在本文章中详细的介绍一下，感兴趣的你可不要错过了啊，希望本文对你有所帮助2013-01-01
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
需要做一个控制grid列显示的checkboxgroup，虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,需要的朋友可以参考下2014-05-05
最近学ajax，接触到了Extjs这个强大的框架。我想通过我的学习笔记，最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章，打好基础是很重要的。2008-12-12
ExtJS Column布局使用说明，需要的朋友可以参考下。2009-10-10
本文就将演示下一个实例使用该代码只需要13行代码 原始需要25-30行代码搞定，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
在解决这个有很多优化方法，今天来说其中一种，那就是在Ant脚本打包的时候，把js中空格、注释去掉、以及合并，合并今天不说了，还未实现这个，在研究中2013-04-04
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法，jquery 的扩展组件 等有直接提供这样的一些现成包，感兴趣的朋友可以了解下2013-08-08
最新评论