[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.htmlextjs -- Ext JS 4 开发工具包的文件
resources -- 附加的CSS , image 和 xml , JSON问文件。
index.html - 入口文件
app.js -- 包含应用程序逻辑。
2.2 实例
1) 新建以下目录结构
- helloext - app.js - index.html - extjs 3) 编辑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>Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' } ] }); } });可以直接浏览器打开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 导入的是：
<script type="text/javascript" src="extjs/ext-debug.js"></script>
如果换成：
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
就不需要使用require 了， 这种方式是一次把所有的Class 全部定义好。
这就是 Ext JS4 的新功能， 动态加载， 只加载一些核心的Class, 其他的通过 require 的方式动态加载。
好处就是性能的提升了^^
如何使用动态加载的方式？
在解压包了可以看到如下文件：
ext.js -- 最小化的Ext JS核心类，其他的类通过动态加载方式。
ext-all.js-- 一次加载完所有的类。
ext-debug.js
ext-all-debug.js
debug 文件的差别是未经压缩的，用于开发和调试用的。