【ExtJS 4.x学习教程】（0）简介

来源：互联网发布：手游数据分析编辑：程序博客网时间：2024/06/16 00:54

作者：周邦涛(Timen)
Email：zhoubangtao@gmail.com
转载请注明出处: http://blog.csdn.net/zhoubangtao/article/details/26577735

1. 简介

Ext JS是一款由Javascript写的开发Web前端用户界面的Ajax框架，它可以用来开发RIA（富客户端）的AJAX应用，ExtJS最初基于YUI（Yahoo! UI）技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，为开发者屏蔽了大量跨浏览器方面的处理，让开发人员可以像开发桌面程序一样开发出复杂的用户界面！比起直接采用DOM开发UI组件轻松很多。ExtJS的发展经历了多个版本，2011年4月22日4.0版本发布，我这里主要研究的就是4.x版本。

2. ExtJS开发入门

这里主要讲述Ext JS 4 开发的环境需要，项目结构等。

2.1 环境要求

2.1.1 浏览器要求

Ext JS 4 支持所有的主流浏览器，从IE6到最新的Google Chrome版本，但是在开发阶段，为了便于调试，推荐使用以下浏览器：

1. Google Chrome 10+

2. Apple Safari 5+

3. Mozilla FirFox 4+（使用FireBug插件）

2.1.2 Web服务器要求

使用ExtJS 4时，其实并不需要Web服务器，但是由于本地的file://协议在大部分浏览器上有跨域问题，所以还是推荐你安装一款Web服务器进行开发，你可以任选一款你喜欢的开发用Web服务器，如Apache HTTP Server，Nginx，Tomcat，Resin

附：如果你只为了查看ExtJS 4的API文档，可以采用任意一款浏览器，打开index.html即可，但是部分例子使用PHP获取数据，所以这些例子会运行不正常，不过不影响

2.1.3 Ext JS 4 SDK 部署

将ExtJS 4 SDK 部署在你安装的服务器上很简单，按照你自己使用的服务器配置，这里不多说。

2.2 项目结构

2.2.1 基本结构

下边要说的项目结构并不是强制的，只是一种保持项目组织性，可扩展性和可维护性的最佳实践，下边是Ext JS4的项目结构：

- appname    - app        - namespace            - Class1.js            - Class2.js            - ...    - extjs    - resources        - css        - images        - ...    - app.js    - index.html

appname 是包含所有应用源代码文件的目录
app 包含所有的ExtJS类，命名规范请参考类系统一文
extjs 包含Ext JS 4 SDK文件
resources 包含CSS和images，以及一些其他的资源文件（如XML，JSON等等）
index.html 是项目入口
app.js 包含应用逻辑，是应用的入口

下边做一个最简单的例子Hello Ext，先在你的Web服务器目录下创建下边的目录和文件

- helloext    - app.js    - index.html

解压Ext JS 4 SDK到helloext下extjs目录中，然后打开index.html，添加如下代码：

<html><head>    <title>Hello Ext</title>    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">    <script type="text/javascript" src="extjs/ext-debug.js"></script>    <script type="text/javascript" src="app.js"></script></head><body></body></html>

extjs/resources/css/ext-all.css 包含Ext JS框架所有的所有CSS信息
extjs/ext-debug.js 包含Ext JS 4核心库中的类
app.js 包含你自己的应用代码

然后打开app.js，并插入一下代码

Ext.application({    name: 'HelloExt',    launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'fit',            items: [                {                    title: 'Hello Ext',                    html : 'Hello! Welcome to Ext JS.'                }            ]        });    }});

现在就可以打开浏览器进行访问了。

2.2.2 动态加载

Ext JS 4自带了动态加载系统，只有程序运行时需要的JavaScript资源才会被加载（这样有效降低网络传输，提高用户体验）。上边的例子中Ext.create创建了一个Ext.container.Viewport实例，当Ext.create被调用时，在真正创建出Ext.container.Viewport的实例之前，类加载器会首先检查Ext.container.Viewport是否已经定义。如果没有定义类加载器就会加载包含Ext.container.Viewport定义代码的JavaScript文件，在上边的例子中就是Viewport.js文件，但是类加载器并不是以一种最理想的方式检测哪些文件需要被加载。由于只有当我们需要创建Ext.container.Viewport实例的时候，Viewport.js才会被加载，并且代码会停止执行直到需要的文件被成功加载，这样就导致了一个小的延时。由于应用程序只能在一个文件成功加载后才能加载下一个，也就是说如果我们多次调用Ext.create的话，延时还会叠加。

怎么修复这个问题呢？我们只需要在调用Ext.application之前添加下边一行即可

Ext.require('Ext.container.Viewport');

这样我们就能保证包含Ext.container.Viewport定义的JavaScript文件在应用程序跑起来之前就已经被加载。

2.2.3 Ext JS类库介绍

1. ext-debug.js 这个文件仅仅用在开发环境。它提供了能使一个应用运行起来的Ext JS的核心类。任何其他额外的类都需要动态加载进来才能使用

2. ext.js 和ext-debug.js功能一样，只是压缩了一下，可以用在生产环境

3. ext-all-debug.js 这个文件包含了Ext JS的整个类库。这样有助于缩短你的学习曲线，尽管在实际开发中ext-debug.js才是首选

4. ext-all.js 这个ext-all-debug.js的压缩版本，它可以在生产环境使用，但是这样并不推荐，因为大部分应用不会用到它包含的所有的类，最好是ext.js，然后将需要使用的其他文件一同压缩到另一个文件中，例如app-classes.js

3. 本系列教程主要涉及的内容

我准备把Ext JS 4这块作为一个系列教程，该教程主要包含以下部分：

1. 基础内容：包括类系统，MVC介绍，布局和容器等

2. 核心部分：Ext类、util类、component包的讲解

3. 专项内容：Window，Panel，Grid的使用

4. 源码研究：针对一些特殊应用，可能找不到解决办法，翻看源码才是王道，这部分会带大家看一些通过看源码解决问题的几个例子。

4. 参考资料

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html

作者：周邦涛(Timen)
Email：zhoubangtao@gmail.com
转载请注明出处: http://blog.csdn.net/zhoubangtao/article/details/26577735

0 0