ext学习

Ext官方网站：http://www.extjs.com
JSEclipse：http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_jseclipse
Firebug：http://www.getfirebug.com

从Ext的站点上下载最新版本的文件，解压什么的我就不说，我想说一下这个文档的结构：
├─adapter 存放所有adapter的文件夹
├─build 经过压缩（build）过的文件
├─docs 文档
├─examples DEMO
├─package 按包分类的文件
├─resources 资源文件，包括CSS和一些图片
└─source 源代码
使用过程当中，除非你特别介意JS文件的加载是否影响速度，大可只引入ext-all.js和ext-all.css两个文件，Ext在包管理方面，我觉得应该向Dojo学习下。

JS和CSS引入的顺序：
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" /> 必须引入
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" /> 可选，用来控制主题，并且有其他两个可选值，xtheme-gray.css、xtheme-vista.css。

引入JS：按照底层依赖的不同：
Ext Stand-alone：
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)：
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)：
jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)：
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)

把相应的文件引入到HTML的head里后，你就可以写你自己的第一Ext的Demo了。
<script type="text/javascript">
function InitDialog() {
var dialog = new Ext.BasicDialog("hello-dlg", {
id: "hello-dialog",
title: "Hello",
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);

Ext.ComponentMgr.register(dialog);
}
function OnButtonClick() {
var dialog = Ext.getCmp("hello-dialog");
dialog.show();
}
Ext.onReady(InitDialog);
</script>

<button onClick="OnButtonClick();">Show</button>
这里有四处要注意一下：
id: "hello-dialog", Compoent的ID，有了这个ID才能用ComponentMgr.register来在全局进行注册
Ext.ComponentMgr.register(dialog); 注册组件
var dialog = Ext.getCmp("hello-dialog"); 根据ID来得到组件
Ext.onReady(InitDialog); Ext.onRead是注册一个在整个页面的DOM构建完成会被执行的函数
呵呵，第一个例子就出来了，试试看吧~