Extjs-start
1.安装firefox及firebug，下载extjs4.1,在myeclipse中新建web项目为ria
2.extjs推荐的应用目录结构如下
appname-该目录包含所有应用源文件
app-该目录包含所有类文件，命名规则应该遵循Class System指南中提到的规则。
extjs-该目录包含EXT JS SDK文件
resources-该目录包含css、图片这些负责改善应用体验的文件，也可以包含其它静态资源（比如XML、JSON等）
index.html-入口文件
app.js-该文件包含应用逻辑
先不用把以上目录都创建，先建一个Helloext的demo
在ria项目的基础上，在webroot中新建app目录，resources目录以及app.js和index.html
app目录为空，resources目录下新建css以及js目录，虽然extjs推荐把extjs的sdk和resources分开，但我习惯把这些东西都当成资源放在resources目录下，目录结构如下:
在resources中把extjs用的css以及js文件分别放到css和js中，另外要把extjs的src文件包含到js中
接下来，按例子写代码。
index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
ext-all.css-该文件包含了整个Extjs框架所需要的样式信息
ext-debug.js-该文件包含ExtJS4核心库的最小集
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.'
}
]
});
}
});
一切ok后，运行myeclipse自带的tomcat服务器，运行结果如图所示
动态加载：
刷新上面的页面，在chrome控制台中据说能看到警告（公司电脑装的360chrome，不知道为什么打不开控制台），这个没做过，警告的意思是建议在Ext.onReady方法前添加Ext.require("Ext.container.Viewport");解释如下：
Extjs自带了一个去动态加载程序运行过程中所必须的js资源的系统，在上面的例子里，Ext.create创建了Ext.container.ViewPort的实例。在Ext.create被调用前，加载器回去检查Ext.container.Viewport是否已经被定义，如果它没有被定义，加载器将在实例化viewport对象前尝试去加载包含Ext.container.Viewport声明的js文件，在上面的列子Viewport.js文件获得成功加载，但是加载器会检测该文件是否以最佳方式加载。
当程序请求一个Ext.container.Viewport的实例，便会去加载它，执行代码便会停止直到ViewPort.js文件成功加载，这样便引起了一段小的延迟，这些延迟将会在我们不断调用Ext.create方法的过程叠加，因为应用程序在请求下一个文件前等待已请求的每一个文件加载。
上面就是解释了，而解决这个文件的方法就是在Ext.application调用前去执行Ext.require方法
这样就确保了包含Ext.container.Viewport代码所在的文件在应用程序执行前加载。不久在刷新页面时会看到Ext.Loader警告。
库内含方法
1.ext-debug.js-该文件只在开发阶段使用，他提供了程序运行所需Ext Js类的最小集，任何附加的类都会作为分文件被动态加载就像上面的demo一样
2.ext.js-和ext-debug.js一样但是用于生成环境，为了和程序的app-all.js（在后面有提到）文件一同使用
3.ext-all-debug.js-这个文件包含了完整的ExtJS库，他可以帮助降低学习曲线，但是ext-debug.js在很多情况下都是在实际应用开发中的首选。
4.ext-all.js该文件是ext-all-debug.js的最小集合，它可以被用于生成环境，但是如果大多数应用没有应用到所有它所包含的所以类的话，是不推荐它用于生产环境的，推荐的做法是为生成环境创建一个定制的build，如下所示
部署
使用Sencha SDK Tools使部署任何ExtJS4应用程序都比以前要简单，该工具允许开发人员为所有用到的js文件以JSB3文件的形式
生成manifest，为程序运行所需要的代码创建一个定制的build。
我的SDK Tools装在D:\Program Files\SenchaSDKTools-2.0.0-beta3，然后就可以用cmd命令了。
1.登录到应用根目录： cd D:/javaweb/webria/webroot
2.运行命令如下，第一个是生成一个JSB3文件
sencha create jsb -a index.html -p app.jsb3
运行命令后会在当前目录生成app.jsb3文件
3.构建于诸如php，java等动态语言服务端之上，可以通过准确的URL来替代index.html
sencha create jsb -a http://localhost:8080/ria/index.html -p app2.jsb3
该命令讲扫描你的index.html文件中所有被应用程序实际用到的框架和程序文件，然后创建一个名为app2.jsb3的文件，生成jsb3文件首先给了一个在building前更改jsb3文件的机会，如果你需要定制资源去备份，但是在很多情况下我们立即会用第二个命令去处理应用程序的build，这时候就很有用。
sencha build -p app.jsb3 -d . 第二个命令这样就创建了两个基于JSB3的文件：
1.all-classes.js-这个文件包含了所有的应用程序类，他不是压缩的因此对已调试程序建立问题十分有帮助。在上面的例子里这个文件将是空的，因为上面的程序没有包含任何类。
2.app-all.js-这个文件是程序运行所需ExtJS类的最小集，他是被压缩过的并且是all-classes.js+app.js的生成版本
一个Ext Js应用对于app的不同生成版本需要有不同的index.html,你可以通过build处理或服务器端逻辑来处理，但对于上面的例子，将创建一个名为index-pord.html的新文件,代码如下
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-debug.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>