認識ExtJS
extjs是使用javascript、css和html等技術實現的主要用于創建用戶界面，且與后臺技術無關的前端ajax框架。
extjs來源于yui，開發理念來源于傳統的桌面軟件開發。
1.下載extjs，解壓，得到目錄結構
o builds：是extjs壓縮后的代碼，體積更小，加載更快
o docs ：extjs的文檔
o examples：官方示例
o locale：多國語言的資源文件
o overview：extjs的功能簡述
o pkgs：extjs各部分功能的打包文件
o resource：extjs要用到的圖片文件與樣式文件。
o src：未壓縮過的代碼目錄
o bootstrap.js：extjs庫的引導文件
o ext-all.js ：必須引入的核心庫
o ext-all-debug.js：ext-all.js的調試版
2.也從hello world開始（extjs 4.0）
01.<HTML>
02.<HEAD>
03.<TITLE>HelloWorld</TITLE>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.<link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />
06.<script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
07.<script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>
08.<script type="text/javascript">
09.Ext.onReady(function(){
10.Ext.MessageBox.alert('HelloWorld','Hello World!Hello World!Hello World!Hello World!');
11.});
12.</script>
13.</HEAD>
14.<BODY></BODY>
15.</HTML>
3.實現工具欄和菜單欄
view source
print?
01.<script type="text/javascript">
02.Ext.onReady(function(){
03.var toolbar =new Ext.toolbar.Toolbar({
04.renderTo:'toolbar',
05.width:300
06.});
07.
08.var childrenMenu =new Ext.menu.Menu({
09.ignoreParentClicks:true,
10.items:[
11.{text:'open one'},
12.{text:'open two'}
13.]
14.});
15.
16.var fileMenu =new Ext.menu.Menu({
17.shadow:'frame',
18.allowOtherMenus:true,
19.items:[
20.new Ext.menu.Item({
21.text:'new'
22.}),
23.{text:'open',menu:childrenMenu},
24.{text:'close'}
25.]
26.});
27.
28.
29.toolbar.add(
30.{
31.text:'新建',
32.menu:fileMenu
33.},
34.{
35.text:'打開'
36.},
37.{
38.text:'保存'
39.},
40.'->',
41.'<a href="#">link</a>',
42.'text'
43.);
44.
45.});
46.</script>
47.</HEAD>
48.<BODY>
49.<div id='toolbar'></div>
50.</BODY>
4.最常用的表單
1）Ext.form.Basic基本表單 提供了字段管理、數據驗證、表單提交、數據加載等功能
2）認識Ext.form.Panel表單面板 是表單項的容器，默認使用anchor布局
Ext.form.Panel與傳統表單的提交方式、表單的驗證和對表單組件的支持有不同：
（1）表單的提交方式 原始的方式是同步進行，panel使用異步方式
（2）對表單驗證的支持 ExtJS支持javascript驗證方式
（3）對表單組件的支持 panel支持ext封裝后的高級組件
例子一：
view source
print?
01.<script type="text/javascript">
02.Ext.onReady(function(){
03.Ext.QuickTips.init();
04.var form =new Ext.form.Panel({
05.title:'myForm',
06.height:120,
07.width:200,
08.frame:true,
09.renderTo:'form',
10.defaults:{
11.labelWidth:50,
12.width:150,
13.labelAlign:'left',
14.allowBlank:false,
15.blankText:'will not null',
16.msgTarget:'qtip'
17.},
18.items:[{
19.xtype:'textfield',
20.fieldLabel:'name'
21.},
22.{
23.xtype:'numberfield',
24.fieldLabel:'age'
25.}]
26.});
27.});
28.</script>
29.</HEAD>
30.<BODY>
31.<div id='form'></div>
32.</BODY>
5.面板和布局類
1）Ext.panel.Panel 主要包括5部分：底部工具欄，頂部工具欄，面板頭部，面板底部，面板體
對于面板最重要的功能和作用就是在其中顯示各種不同來源的內容，extjs提供了4種不同的顯示內容的方式，分別是：
1）使用autoLoad配置項為面板加載遠程頁面 就是遠程加載html文件
2）使用contentEl配置項為面板加載本地資源 加載當前頁面中的html代碼
3）使用html配置項自定義面板內容 自己編寫html代碼
4）使用items配置項在面板中添加組件
2）標準布局類 主要包括如下11種：
auto（自動布局） checkboxgroup（復選框組布局） fit（自適應布局） column（列布局）
accordion（折疊布局）table(表格布局） card（卡片式布局） border（邊框布局）
anchor（錨點布局） box（盒布局） absolute（絕對位置布局）
（1）auto自動布局 默認采用，使用原始的HTML文檔流來布局子元素。
（2）fit自適應布局 使唯一的子元素充滿容器
（3）accordion折疊布局 只有一個子面板處于打開狀態，其他的收縮起來
（4）card卡片式布局 多個子面板，只有一個處于打開狀態，其他的需要調用事件才能顯示出來
（5）anchor錨點布局 根據容器大小為其所包含的子面板進行定位。
（6）absolute絕對定位 可以根據面板的位置配合x/y坐標進行定位
（7）checkboxgroup復選框組布局
（8）column列布局 多列風格的布局樣式
（9）table表格布局 可以創建出復雜的表格布局
（10）border邊框布局 將整個容器分為5個部分：東南西北中。
（11）box盒布局
在ext中，所有的布局都是從ext.container開始的
3）使用viewport
viewport代表整個瀏覽器窗口的顯示區域，將document.body作為渲染對象，它會根據瀏覽器窗口的大小自動調整自身的尺寸，每個頁面中只允許出現一個viewport實例。
6.ext的事件和類
分為兩種類型：自定義類型事件和瀏覽器事件
自定義事件：所有繼承自Ext.util.Observable類的控件都可以支持事件，可以為這些對象定義一些事件，然后為這些事件配置監聽器。當某個事件被觸發時，ext會自動調用對應的監聽器。
瀏覽器事件：傳統意義上的鼠標單擊、移動等事件。