[Ext JS4系列]Ext JS4 入门| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS4系列]Ext JS4 入门

## [Ext JS4系列]Ext JS4 入门
### 1. 要求
##### 1.1  浏览器
Ext JS 4 支持从IE6到Google Chrome 最新版几乎所有的主流浏览器。但是对于开发而已，使用以下浏览器可以很方便的进行调试。
Google Chrome 10+
Apple Safari 5+
Mozilla Firefox 4+(with Firebug)
##### 1.2 Ext JS4 开发工具包下载
http://www.sencha.com/products/extjs/download/
可以下载基于GPL开源协议的开发包。(目前的最新版是ext-4.2.1.883)
### 2. 应用程序结构
#####2.1 基本结构
推荐的Ext JS 的应用程序结构如下（非强制使用）
- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
app -- 放置自己定义的类， 命名规格需遵循类的命名规则
extjs  -- Ext JS 4 开发工具包的文件
resources -- 附加的CSS , image 和  xml , JSON问文件。
index.html - 入口文件
app.js -- 包含应用程序逻辑。

#####2.2  实例 
1)  新建以下目录结构
- helloext
    - app.js
    - index.html
    - extjs
2) 解压下载的Ext JS4 的zip 包，放入 extjs 的目录下
3) 编辑index.html 内容如下
```html
<html>
<head>
<title>Hello Exttitle>
<linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css">
<scripttype="text/javascript"src="extjs/ext-debug.js">script>
<scripttype="text/javascript"src="app.js">script>
head>
<body>body>
html>
```
4) app.js内容如下
```html
Ext.application({
name: 'HelloExt',
launch: function() {
        Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
                {
title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});
```
5) 查看效果
可以直接浏览器打开index.html, 也可以放入web server 通过  http url 方式查看。
注意;
以上例子在Firefox 下是正常的，但是在IE和Chrome 确无法显示。原因和解决方法如下描述。

### 3. 动态加载
使用 Chrome Delveloper Tools 查看原因(F12)

原因是Ext JS4 有一个新的特性就是动态加载。
就是需要的时候才去加载相应的 js 资源。 比如。这里要创建一个 Ext.container.Viewport， 首先要找Ext.container.Viewport 是否已经定义过， 如果没定义就找相关的js去加载。但是，加载是有一个时间延时的，如果在实例之前还没有加载完定义的话， 就会出错。
解决此问题的办法是在 app.js  前加上：
Ext.require('Ext.container.Viewport');
意思很简单，就是先声明定义好。

你可能会问？ 为什么使用Ext JS 3 的时候不需要使用 reuqire 就可以 work, Ext JS 4 是否也有那种用法？
当然有， 注意在 index.html 导入的是：
如果换成：
就不需要使用require 了， 这种方式是一次把所有的Class 全部定义好。
这就是 Ext JS4 的新功能， 动态加载， 只加载一些核心的Class, 其他的通过   require 的方式动态加载。
好处就是性能的提升了^^

### 如何使用动态加载的方式？
在解压包了可以看到如下文件：
ext.js -- 最小化的Ext JS核心类，其他的类通过动态加载方式。
ext-all.js-- 一次加载完所有的类。
ext-debug.js
ext-all-debug.js
debug 文件的差别是未经压缩的，用于开发和调试用的。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS4系列]Ext JS4 入门

网站导航