EXTjs入门

入门

环境要求

浏览器

ExtJs支持所有主要的网络浏览器，从IE6到最新版本的谷歌浏览器，在开发调试工程中，我们推荐您使用：

这篇教程假设你使用的是最新版本的谷歌浏览器。如果你没有，花一点时间来安装它,并自己熟悉其开发工具。

服务器

尽管不是必须，我们建议你使用本地网络服务器。由于XHR 在本地文件时大多数浏览器有协议限制。我们建议安装：

Apache安装启动后，通过浏览器访问localhost，你应该看到一个Apache启动成功网页。

Ext JS 4 SDK

下载SDK解压到服务器WEB目录的新建文件夹“ExtJS”下，不清楚服务器的WEB目录请参考服务器的手册。这个路径和操作系统有关。一般来说Apache的WEB目录为：

浏览http://localhost/extjs/index.html看到Ext的欢迎页面就算安装成功了。

应用构架

基本结构

尽管不是强制的,下面列出的所有建议应看作是你的指导方针保证您应用是有效组织、可扩展和可维护的。以下是建议的Ext目录结构为:

不要着急立即完成所有这些目录，现在让我们专注开发Ext 应用必要的最少代码。我们将创造一个基本的"Hello Word"应用：称为“Hello Ext”。在您的网页根目录创造下列目录和文件。

将包含Extjs SDK的Extjs文件夹放到helloext目录下。

典型的Ext应用包含单一的Html文档--index.html文件：

下面是应用程序逻辑：---app.js

打开浏览器浏览http://localhost/helloext/index.html。将看到一个面板标题为"Hello Ext"，内容为"welcome"。

动态加载

ExtJS4支持延迟-动态加载。例如Ext.create创建了一个Ext.container.Viewport实例。在Ext.create被调用时，加载器首先减产Ext.container.Viewport是否定义。没有定义则

在创建Ext.container.Viewport实例之前首先试图加载Ext.container.Viewport的定义文件。本例中Viewport.js 加载成功，但这不是优化的方法，由于加载Viewport.js文件只有在需要创建Ext.container.Viewport实例时才加载，这将导致延迟。如果我们在调用Ext.create前需要多个文件，这延迟可以被叠加,因为应用程序在加载下一个文件前将等待。

解决办法是在应用程序代码开始前写上：

这将保证在程序运行前加载Viewport.js文件。

Extjs库文件的区别

开发(自定义库文件)

新开发的Sencha SDK 工具使Ext JS 4 应用的开发更方便，这个工具生成的jsb文件包含所有的js依赖。可以为应用生成仅包含必需代码的Extjs库。

安装好sdk后，到path/to/web/root/helloext目录下：

也可以通过服务器文件：

该工具扫描index.html和应用实际用到的程序文件，创建名为app.jsb3的文件，如果需要，你可以修改这个文件--大多是情况下并不需要。然后第二步：编译。

生成两个文件：