【ExtJs】ExtJs入门第一天

来源：互联网发布：ae视频软件编辑：程序博客网时间：2024/06/04 04:33

自Ajax之父Jesse James Garrett于2005年提出这一新概念之后，这一沉睡了多年的技术，换上新衣，一下子变得容光焕发。经过将近3年的发展，Ajax技术在国际社区内取得了很大的发展，已经比较成熟。Ajax发展至今，各种关于Ajax的框架层出不穷，但是从社区的情况来看，从来没有哪一种框架像ExtJS一样炙手可热。

相信很多人都曾有过和我一样的感叹：“在中国真好，有如此多的免费产品（特指与计算机相关的产品，如软件）可以供我们使用。”但是最近却出了一件“怪事”，居然有人能靠写电子教程或者是将电子教程印刷装订成册来获取丰厚的经济回报（其实这种情况在国外再常见不过了）。是什么样的电子教程有如此大的吸引力呢？有关ExtJs的教程，就是它！由此可以想象，ExtJS对于开发者来说有着怎样的一种吸引力。

如果您以前没有听说过ExtJS，或者是对它还不了解，看到这里，你是否会对此产生兴趣呢？

一、什么是ExtJS

要了解什么是ExtJS，得先了解一下什么是YUI。

YUI（Yahoo! UI Library ）是一个开源的JavaScript库，与Ajax、DHTML和DOM等技术一起使用可以用于创建富有交互性的Web应用，它还包含丰富的CSS资源。

Ext最初是YUI的一个扩展，然而，它现在也可以扩展自JQuery和Prototype。自1.1版开始，Ext已经可以独立运行，不需要依赖于那些外部库，虽然它仍然是可被集成的一个选项。

现在，Ext 3.0版可以使用许多不同的基础库，例如YUI、JQuery和Prototype，或者是可以独立的运行。

ExtJS是一个非常棒的Ajax框架，可以用来开发富有华丽外观的富客户端应用，能使b/s应用更加具有活力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用程序中。

我目前使用的是ExtJs2.2版本的。

二、下载ExtJs

我们要使用ExtJs就必须要下载ExtJs框架文件，这里我提供一个官方的下载地址列表：

http://extjs.com/products/extjs/download.php 这个网站中包含了不多版本的ExtJs下载列表。我们可以根据自己的实际需要来决定使用哪一个版本。下载列表如下图：（该图截取于2009-06-09号）

另外，这里提供我平常经常使用的几个网站：

1、当然是GOOGLE. http://www.google.com

2、就是ExtJs下载解压后文件夹中的examples文件夹。这个文件夹中有许多值得研究的例子。

3、http://extjs.org.cn/这个网站不错，里面有许多可以值得学习和参考的教程以及资料。

4、http://www.dojochina.com/extdoc/docs/ 这是一个汉化后的EXTJS Api ，版本是2.2的，而且汉化的不够完善，不过还是要感谢这些大侠。有了这个总比你自己去啃E文的API要好,不过你E问厉害我也没办法。

工欲善其事必先利其器，Adobe公司提供了一个叫做JsExclipse开发工具用来开发ExtJs很好。嘿嘿。各位如有兴趣可以GOOGLE一下去。这里我不多说。

三、了解ExtJs的文件结构

下载ExtJs的压缩文件后，如下图：

我们将该文件解压缩，这是我们可以看到如下图所示的文件夹和文件，具体每个文件夹以及文件的作用我会在后面一一告知大家：

examples：示例文件夹。

resources：资源文件。ExtJs样式的修改就是对该文件夹进行修改。

source：源文件，有兴趣的可以研究研究。

四、开发第一个ExtJs程序

1、我们在MyEclipse中新建一个Web Project。注意，再次之前请参考我的另一篇文章：

MyEclipse下轻松搞定Extjs，该文可以告诉我们如何解决ExtJs本地化以及头痛的乱码问题

http://user.qzone.qq.com/77233497/blog/1242369996

2、新建一个ExtJs文件夹，在该文件夹中我们专门用于存放ExtJs开发时使用到得文件：

3、新建一个MyJs文件，该文件夹用于存放我们经常自己所写的js文件。

4、我们开始写一个简单的extjs构成的js文件Login.js

Ext.onReady(function(){
    Ext.QuickTips.init();

    var login = new Ext.FormPanel({
        labelWidth:80,
        url:'login.jsp',
        frame:true,
        title:'Please Login',
        defaultType:'textfield',
      monitorValid:true,

        items:[{
                fieldLabel:'Username',
                name:'loginUsername',
                allowBlank:false
            },{
                fieldLabel:'Password',
                name:'loginPassword',
                inputType:'password',
                allowBlank:false
            }],

        buttons:[{
                text:'Login',
                formBind: true
        }]
    });

    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
    });
    win.show();
});

5、我们写一个JSP页面显示该JS种的内容。

<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="ExtJs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js" charset="utf-8"></script>
<script type="text/javascript" src="ExtJs/ext-all.js" charset="utf-8"></script>
<script type="text/javascript" src="ExtJs/source/locale/ext-lang-zh_CN.js" charset="utf-8"></script>

</head>
<body>

</body>
</html>

如果，测试后不成功，请参考：

http://user.qzone.qq.com/77233497/blog/1242369996

万事开头难，迈出了艰难的第一步，后面我们会发现其实ExtJs学起来并不困难。

（文中部分内容来自网上，如有版权问题，请联系QQ77233497。彭彦程。）

【ExtJs】ExtJs入门 第一天

【ExtJs】ExtJs入门第一天