1 ExtJS入門
1.1 支持所有主流瀏覽器
調試推薦：chrome、Safari、Firefox
1.2 推薦目錄結構
- appname （包含所有程序代碼，是根目錄）
- app （包含所有類，按包的規則命名子目錄）
- namespace
- Class1.js
- Class2.js
- ...
- extjs （ExtJS 4 SDK）
- resources （CSS圖片等資源文件）
- css
- images
- ...
- app.js （程序入口，包含程序邏輯）
- index.html （入口文件）
ExtJS 4 SDK部分說明：
- extjs/resources/css/ext-all.css 包含了所有樣式
- extjs/ext-debug.js 包含了最基礎的一些類，ExtJS 4 Core核心部分，只在開發時使用，任何附加的類都通過動態加載引入（會造成n多請求，所以發布應用的時候不要用這個）
- extjs/ext.js 功能和ext-debug.js一致，但是是用於對外發布的，它和app-all.js一起使用
- extjs/ext-all-debug.js 包含ExtJS全部內容，全部class，它可以像ExtJS 3那樣使用，可以減少學習成本，官方還是推薦ext-debug.js這種引入了新機制的方式
- extjs/ext-all.js 是ext-all-debug.js的壓縮版本，內容跟其一致，可用於發布，但是它包含所有內容，官方不推薦
- all-classes.js 包含app自定義的所有類，這個文件沒有壓縮可以方便調試
- app-all.js 這個文件是壓縮過的，包含所有app代碼和依賴的類，相當於一個可以用於發布的 all-classes.js + app.js
- builds：是extjs壓縮后的代碼，體積更小，加載更快
- docs ：extjs的文檔
- examples：官方示例
- locale：多國語言的資源文件
- packages：extjs各部分功能的打包文件
- resource：extjs要用到的圖片文件與樣式文件。
- src：未壓縮過的代碼目錄
- bootstrap.js：extjs庫的引導文件
- ext-all.js ：必須引入的核心庫
- ext-all-debug.js：ext-all.js的調試版
1.3 支持動態按需加載
2 MVC架構
u Model模型 是字段和它們的數據的集合，例如User模型帶有username和password字段，模型知道如何持久化自己的數據，並且可以和其他模型關聯，模型跟ExtJS 3 中的Record類有點像（區別是，Record只是單純的扁平結構，而Model可以nest），通常都用在Store中去展示grid和其他組件的數據
u View視圖 是組件的一種，專注於界面展示。例如， grid, tree, panel 都是view
u Controllers控制器 一個安放所有使你的app正確工作的代碼的位置，具體一點應該是所有動作，例如如何渲染view，如何初始化model，和app的其他邏輯
3 布局和容器
ExtJS的UI由組件(Component)構建而成，容器(Container)是一種可以盛放其他組件的特殊類型組件，每個典型的ExtJS應用都是數層嵌套的組件組成的。
每個容器都由布局來管理子組件的大小和位置。
3.1 通用布局方式
3.1.1 Absolute絕對布局
可使用坐標（x、y）進行布局
3.1.2 Accordion手風琴布局
實現Accordion效果的布局，也可叫可折疊布局。也就是說使用該布局的容器的子組件是可折疊的形式表現。
3.1.3 Anchor固定布局
會根據容器的大小固定其相對於容器的尺寸
這個布局就是表單面板默認支持的，每一項占據一行，支持用anchor配置項分配各個子項的高度和寬度。為百分比時表示當前大小占父容器的百分比；為數字時一般為負數，表示父容器的值減去差值，剩下的為子項的大小。
說明 ：
anchor: '80% 20%'，中間用一個空格隔開，空格前后是%的數字。第一個參數80%：意思是寬度設置為整體的80%；第二個參數20%：是設置高度為整體的20%。
anchor:'-50 -150' ，中間用一個空格隔開，空格前后是整數，第一個參數-50：表示距離右側的相對距離；第二個參數-150：表示距離底部的相對距離。
3.1.4 Auto默認布局
不給下級組件指定大小和位置
3.1.5 Border邊界布局
可將一個容器划分為幾個區域，每個區域可以展開或折疊
它將頁面分隔成為：west、east、south、north、center 這五個部分，我們在items里面使用region參數為它組織定義具體的位置。
north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。North、south、west、east區域變大了，center區域就變小了。
參數 split:true 可以拖動除了center四個區域的大小。
參數 collapsible:true 激活折疊功能。
3.1.6 Card卡片布局
該布局可維護多個子組件，每個子組件都會自適應於容器，而每次只會顯示一個子組件。可以看做是一疊卡片一樣，從上面看起來就像是一張卡片，我們可以把中間的卡片抽出來，放到最上面，可是每次只能顯示一張卡片。
我們可以定義翻頁按鈕來控制當前處於活動狀態的子組件，像卡片一樣的切換每個子組件。因而該布局多用於實現向導功能。
3.1.7 Column列布局
該布局是把子組件按照列進行划分。在往里面放入子組件的時候，可以通過子組件的columnWidth和width來制定列的寬度，columnWidth是按百分比（4/10、.25）來制定列的寬度，width是按照絕對像素來制定列的寬度。在實際應用中可以將兩種混合使用。
注意items 中 columnWidth 的數值必須是0~1之間的小數，它表示每個子組件在整體中所占的百分比。它們的總和應該是1，否則會出現沒有填滿或超出換行的情況。
3.1.8 Fit自適應布局
如果布局內只有一個組件，會將該組件自動填充滿容器
它解決了自適應的問題：當客戶要求一個窗口里顯示一個Grid表格，可以讓它自動適應窗體的大小的變化，窗體變大時候Grid表格也變大，窗體變小的時候也變小。
注意：layout : 'fit' 組件的items只能放一個組件，如果放了多個組件，那么也只有一個子組件會起作用。
3.1.9 HBox水平布局
用於水平划分容器的布局。
² align：字符類型，指示組件在容器內的對齊方式。有如下幾種屬性。
1、top（默認）：排列於容器頂端。
2、middle：垂直居中排列於容器中。
3、stretch：垂直排列且拉伸義填補容器高度。
4、stretchmax:垂直拉伸，並且組件以最高高度的組件為准。
² pack : 字符類型，指示組件在容器的位置，有如下幾種屬性。
1、start（默認）：組件在容器左邊。
2、center：組件在容器中間。
3、end：組件在容器的右邊。
3.1.10 Table表格布局
該布局把頁面定義成一個表格（HTML中Table）包括行和列，我們可以像表格一樣設置rowspan和colspan。它在生成代碼的時候就是生成了html代碼中的<table></table>標簽。
心得：容器table只能設置有幾列，不能設置有幾行；子組件設置rowspan后，高度不會自適應，colspan后的寬度可以自適應；子組件本身的高寬不能自適應。
3.1.11 VBox垂直布局
用於垂直划分容器的布局。
² align：字符類型，指示組件在容器內的對齊方式。有如下幾種屬性。
1、left（默認）：排列於容器左側。
2、center ：控件在容器水平居中。
3、stretch：控件橫向拉伸至容器大小。
4、stretchmax：控件橫向拉伸，寬度為最寬控件的寬。
² pack : 字符類型，指示組件在容器的位置，有如下幾種屬性。
1、start（默認）：組件在容器上邊。
2、center：組件在容器中間。
3、end：組件在容器的下邊。
