《ExtJS Web應用程序開發指南(第2版)》前言
ExtJS 的前身是YUI（Yahoo User Interface）。經過不斷髮展與改進，ExtJS現在已經成功發佈了4.0版本，並且成爲構建RIA Web應用的一套最完整、最成熟的JavaScript基礎庫。利用ExtJS構建的RIA Web應用具有與桌面程序一樣的標準用戶界面和操作方式，並且能夠跨不同的瀏覽器平臺使用。ExtJS已經成爲開發具有完美用戶體驗的Web應用選擇。許多程序員在RIA Web開發的征途中選擇ExtJS作爲克敵制勝的武器，因爲他們可以享受ExtJS帶來的類似於Win32編程的原生態快樂。
現在用戶對體驗的要求越來越高。對於Web應用開發者而言，ExtJS無疑是優秀的解決方案，它能夠幫助開發者快速實現良好用戶界面的開發。而且由於 ExtJS是在YUI的基礎上拓展出來的，在國內具有廣泛的用戶，再加上ExtJS又是開源的，所以ExtJS的生命力極強。
ExtJS的功能時刻吸引我們去深入探究，但由於ExtJS自身的特點，使得我們在學習它的時候會遭遇如下的諸多困惑：
- ExtJS爲用戶提供了功能強大的組件，但這些組件並不能滿足項目中功能多變的需求，如何學會擴展已有組件呢？除了擴展組件，ExtJS組件還提供了插件功能，學會插件的編寫也是一個不錯的選擇。那麼，如何編寫插件呢？
- 要擴展ExtJS組件只閱讀Api文檔是不行的，還必須熟悉相關的組件源代碼，這樣纔能有效地實現組件擴展，所以應該快速掌握ExtJS的源代碼。可如何快速掌握呢？
- ExtJS源代碼的數量和結構比較複雜，在其中大量使用了JSON對象實現功能的封裝，所以熟悉JSON對象是必須的。怎樣熟悉JSON對象呢？
- 如果直接使用ExtJS的原始組件要配置的內容比較複雜，學會組件式的開發方法可以大幅減少代碼量，減輕維護的強度。什麼是組件式的開發方法呢？
- 在ExtJS的源代碼中經常出現一些不常見的語法形式，不太容易理解。怎麼理解這些源代碼呢？
在《ExtJS Web應用程序開發指南(第2版)》中你會找到上述所有問題的答案。本書通過各種實例，全面地介紹如何使用ExtJS來進行RIA Web開發，並對ExtJS在開發過程中與其他相關技術的結合進行了說明，最終開發出功能強大、界面標準、用戶體驗完美的Web應用。本書的案例來自於 ExtJS開發的實際應用，大部分是來自實際的Web 應用項目，對開發者具有極強的指導意義。
本書特色
- 閱讀門檻低——不要求讀者對ExtJS有所瞭解，只要熟悉JavaScript編程，本書就能帶你從頭開始領略ExtJS的風采。
- 平臺開發的概念——可以認爲ExtJS是一種軟件開發平臺，而非一個普通JavaScript框架，ExtJS是用桌面程序開發思想引導基於ExtJS的Web應用。
- 來自於實踐——本書中大量的案例都是實際項目情景的縮影，在講解時穿插大量的實踐經驗提示，實踐的指導意義強大。
- 典型場景應用——本書在講述各章內容時穿插了一個對常見Web應用框架使用ExtJS進行改造的實例。Web應用框架是最基本的典型場景應用，每個Web開發者都會遇到。
- 包含了大量ExtJS 4.0新特性——本書是對第1版的完全升級，對ExtJS 4.0中包含的新特性進行了有重點的詳細介紹，是學習ExtJS 4.0新特性的指導手冊。
致謝與分工
《ExtJS Web應用程序開發指南(第2版)》由衛軍、夏慧軍和孟臘春編著。此外還要感謝王斌、張強林、萬雷、張賽橋、劉軍華、黃北軍、陳洪軍、黃中林、陳鯤、趙騰倫等人，他們爲本書的出版做出了貢獻。本書由成都道然科技有限責任公司策劃和審定。最後感謝Testdll、清源、Alex XRDU等多位技術專家提出的寶貴意見和建議。
限於水平和精力有限，書中疏漏之處難免，歡迎讀者批評指正。爲方便讀者更好地理解和閱讀本書，我們將《ExtJS Web應用程序開發指南(第2版)》一書中的代碼與示例提供給讀者，相關代碼的下載地址爲：www.hzbook.com或www.dozan.cn。
目錄：
第1章 認識ExtJS 1
1.1 ExtJS的精彩表現 1
1.2 ExtJS的前世今生 2
1.3 是否真的需要學習ExtJS 4
1.4 ExtJS 4.0新特性 8
1.5 ExtJS UI組件基礎 10
1.6 瞭解一下類似技術 13
1.7 本章小結 16
第2章 開始ExtJS之旅 17
2.1 認識ExtJS的開發包 17
2.2 也從Hello world開始 18
2.3 ExtJS中的基本概念 19
2.4 非常有用的開發工具 20
2.4.1 開發插件spket 20
2.4.2 FullSource 23
2.4.3 Microsoft Script Debugger 24
2.5 ExtJS對原有JavaScript對象的擴展 25
2.5.1 Ext.Array 25
2.5.2 Ext.Date 27
2.5.3 Ext.Function 29
2.5.4 Ext.Number 30
2.5.5 Ext.String 31
2.5.6 Ext.Object 32
2.6 本章小結 33
第3章 ExtJS 4.0的基本功能 34
3.1 ExtJS組件配置說明 34
3.1.1 JSON介紹 34
3.1.2 ExtJS組件配置方式介紹 35
3.2 信息提示框組件介紹 36
3.2.1 認識Ext.window.MessageBox 37
3.2.2 Ext.MessageBox.alert() 39
3.2.3 Ext.MessageBox.confirm() 40
3.2.4 Ext.MessageBox.prompt() 41
3.2.5 Ext.MessageBox.wait() 42
3.2.6 Ext.MessageBox.show() 42
3.2.7 Ext.window.MessageBox的其他功能 45
3.3 進度條組件介紹 48
3.3.1 認識Ext.ProgressBar 48
3.3.2 手工模式的進度條 50
3.3.3 自動模式的進度條 51
3.3.4 自定義樣式的進度條樣式 52
3.4 實現工具欄和菜單欄 53
3.4.1 認識Ext.toolbar.Toolbar 53
3.4.2 只包含按鈕的簡單工具欄 54
3.4.3 包含多種元素的複雜工具欄 56
3.4.4 啓用和禁用工具欄 57
3.4.5 認識Ext.menu.Menu菜單 58
3.4.6 最簡單的菜單欄 58
3.4.7 創建二級或多級菜單 60
3.4.8 將更多組件加入菜單 61
3.4.9 具有選擇框的菜單 62
3.5 本章小結 64
第4章 最常用的表單 65
4.1 表單及表單元素 65
4.1.1 瞭解Ext.form.Basic基本表單 65
4.1.2 認識 Ext.form.Panel表單面板 68
4.1.3 Ext.form.field.Base基礎表單字段 70
4.1.4 Ext.form.field.Text文本域 74
4.1.5 Ext.form.field.TextArea文本區 76
4.1.6 Ext.form.field.Number數字輸入框 78
4.1.7 Ext.form.field.Checkbox複選框和Ext.form.field.Radio單選框 80
4.1.8 Ext.form.CheckboxGroup和Ext.form. RadioGroup 81
4.1.9 Ext.form.field.Trigger觸發字段 83
4.1.10 Ext.form.field.Spinner微調字段 84
4.1.11 Ext.form.field.Picker拾取器字段 85
4.1.12 Ext.form.field.ComboBox組合框 86
4.1.13 Ext.form.field.Time時間選擇框 92
4.1.14 Ext.form.field.Date日期選擇框 94
4.1.15 Ext.form.field.Hidden隱藏字段 97
4.1.16 Ext.form.field.HtmlEditor編輯器字段 98
4.1.17 Ext.form.field.Display只讀文本字段 101
4.1.18 Ext.form.Label標籤字段 102
4.1.19 Ext.form.FieldSet字段集 103
4.1.20 Ext.form.FieldContainer容器字段 105
4.1.21 Ext.form.field.File文件上傳字段 107
4.2 實現表單驗證 109
4.2.1 常見的驗證類型 109
4.2.2 表單驗證（VType） 110
4.2.3 自定義VType驗證 111
4.3 表單的提交和加載 114
4.3.1 Ext.form.action.Action基礎 114
4.3.2 Ajax模式的表單數據加載 116
4.3.3 Ajax模式的表單數據提交 119
4.3.4 標準模式的表單數據提交 121
4.3.5 使用Direct技術 123
4.4 本章小結 126
第5章 面板及佈局類 127
5.1 面板panel 127
5.1.1 認識Ext.panel.Panel 127
5.1.2 Ext.panel.Panel的主要功能 128
5.1.3 使用Ext.panel.Panel 131
5.2 標準佈局類 136
5.2.1 Auto自動佈局 136
5.2.2 Fit自適應佈局 137
5.2.3 Accordion摺疊佈局 138
5.2.4 Card卡片式佈局 139
5.2.5 Anchor錨點佈局 141
5.2.6 Absolute絕對位置佈局 144
5.2.7 CheckboxGroup複選框組佈局 145
5.2.8 Column列布局 145
5.2.9 Table表格佈局 148
5.2.10 Border邊框佈局 149
5.2.11 Box盒佈局 151
5.3 使用ViewPort 152
5.4 Ext.tab.Panel頁籤 153
5.5 本章小結 155
第6章 常用工具類與函數 156
6.1 非常有用的Ext.core.Element 156
6.2 Ext常用函數 158
6.2.1 Ext.onReady() 158
6.2.2 Ext.get() 160
6.2.3 Ext.select () 160
6.2.4 Ext.query () 161
6.2.5 Ext.getCmp() 163
6.2.6 Ext.getDom() 163
6.2.7 Ext.isEmpty() 164
6.2.8 Ext.namespace() 165
6.2.9 Ext.each() 165
6.2.10 Ext.apply() 166
6.2.11 Ext.encode() 167
6.2.12 Ext.htmlDecode() 168
6.2.13 Ext.typeOf() 169
6.3 Ext.core.DomHelper 169
6.3.1 Ext.core.DomHepler.append() 170
6.3.2 Ext.core.DomHelper.applyStyles() 170
6.3.3 createTemplate() 171
6.3.4 insertAfter() 172
6.3.5 insertBefore() 172
6.3.6 insertFirst() 173
6.3.7 insertHtml() 174
6.3.8 overwrite() 175
6.4 Ext.core.DomQuery 176
6.4.1 compile() 176
6.4.2 filter() 176
6.4.3 is() 177
6.4.4 jsSelect() 177
6.4.5 selectNode() 177
6.5 Ext.util.CSS 178
6.5.1 createStyleSheet() 178
6.5.2 getRule () 179
6.5.3 swapStyleSheet() 179
6.5.4 removeStyleSheet() 181
6.6 Ext.util.ClickRepeater 182
6.6.1 click() 182
6.6.2 mousedown() 183
6.6.3 mouseup() 183
6.7 Ext.util.DelayedTask提供setTimeout的簡單替代 184
6.7.1 cancle() 184
6.7.2 delay() 185
6.8 Ext.util.Format 提供常用的格式化方法 185
6.8.1 ellipsis() 185
6.8.2 capitalize() 185
6.8.3 date() 186
6.8.4 htmlEncode () 186
6.8.5 htmlDecode() 186
6.8.6 stripTags() 187
6.8.7 substr() 187
6.8.8 lowercase() 187
6.8.9 number() 187
6.8.10 round() 188
6.9 Ext.util.JSON 編碼和解碼Json對象 189
6.9.1 decode() 189
6.9.2 encode() 189
6.10 Ext.util.MixedCollection 190
6.10.1 向集合加入對象 190
6.10.2 將數組中的對象加入到集合中 191
6.10.3 移除集合中的對象 191
6.10.4 克隆集合 192
6.10.5 匹配集合中關聯對象 192
6.10.6 迭代集合中的對象調用指定的方法 192
6.10.7 獲取集合中的對象 193
6.10.8 該類中的其他一些有用的方法 194
6.10.9 該類中重要的事件（Events） 196
6.11 Ext.util.TaskRunner 197
6.11.1 構造函數 197
6.11.2 啓動一個線程start() 198
6.11.3 停止一個線程stop() 198
6.11.4 停止所有的線程stopAll() 198
6.12 Ext.util.TextMetrics得到塊狀化文本規格 199
6.12.1 塊的綁定 199
6.12.2 實例化對象 199
6.12.3 獲取文本的高度 199
6.12.4 獲取文本的寬、高 200
6.12.5 獲取文本的寬度 200
6.12.6 獲取指定節點內文本塊的寬、高 200
6.12.7 指定文本塊的寬 201
6.13 Ext.KeyNav爲元素提供簡單的按鍵處理方法 201
6.13.1 實例化一個鍵盤綁定對象 202
6.13.2 廢棄原有鍵盤綁定 202
6.13.3 將廢棄的鍵盤綁定重新生效 203
6.14 Ext.KeyMap 提供更靈活強大的對按鍵的處理方法 203
6.14.1 構造函數 203
6.14.2 給對象添加鍵盤綁定 204
6.14.3 廢棄已綁定到KeyMap的配置 205
6.14.4 將KeyMap或廢棄的配置重新生效 205
6.14.5 獲取當前KeyMap配置是否爲有效 205
6.14.6 事件綁定函數 205
6.15 本章小結 205
第7章 讓ExtJS開始響應事件 207
7.1 ExtJS事件與瀏覽器標準事件的異同 207
7.1.1 事件綁定方式 207
7.1.2 自定義事件 209
7.1.3 跨瀏覽器事件 210
7.2 ExtJS事件特性 211
7.2.1 Ext.util.Observable（事件基類） 211
7.2.2 舉例一：addEvents 、fireEvent、addListener 213
7.2.3 舉例二：capture攔截器示例 214
7.2.4 舉例三：addManagedListener受管事件監聽器 215
7.2.5 舉例四：relayEvents傳播分發事件 216
7.3 Ext.EventObject（事件對象） 217
7.4 Ext.EventManager（事件管理器） 218
7.5 本章小結 220
第8章 常見Web框架的ExtJS改造 221
8.1 常見Web應用框架說明 221
8.2 簡易書籍管理系統 221
8.2.1 總體設計 222
8.2.2 數據庫設計 222
8.2.3 數據庫腳本 222
8.2.4 工程框架設計 223
8.2.5 頁面設計 231
8.3 怎樣開始 232
8.3.1 頁面改造 233
8.3.2 與服務器交互方式的改造 233
8.4 開始改造吧 233
8.4.1 改造主頁面佈局 233
8.4.2 改造菜單欄 235
8.4.3 改造書籍維護界面 237
8.4.4 改造書籍新增界面 239
8.4.5 改造書籍修改界面 246
8.4.6 改造書籍刪除功能 248
8.5 換膚的實現 250
8.5.1 創建實現換膚功能的自定義組件Ext.ux.ThemeChange 250
8.5.2 查看換膚效果 251
8.6 本章小結 251
第9章 ExtJS對Ajax的支持 252
9.1 Ext.Ajax入門 252
9.1.1 Ext.Ajax.request方法詳解 253
9.1.2 Ext.Ajax.request操作示例 255
9.2 Ext.ElementLoader基礎 259
9.2.1 Ext.ElementLoader.load操作示例 260
9.2.2 Ext.ElementLoader其他方法示例 262
9.3 利用Ajax優化Web應用框架 264
9.3.1 多級聯動菜單 264
9.3.2 天氣情況查詢 267
9.3.3 自動保存的網絡記事本 270
9.3.4 網頁計算器 272
9.4 本章小結 274
第10章 增強型模板 276
10.1 熟悉Ext.Template 276
10.1.1 Ext.Template使用舉例 277
10.2 Ext.XTemplate基礎 280
10.2.1 自動填充數組和作用域切換 280
10.2.2 在子模板中訪問父對象 281
10.2.3 數組索引和簡單運算支持 282
10.2.4 自動渲染簡單數組 283
10.2.5 使用基本的條件邏輯判斷 283
10.2.6 在模板中執行任意代碼 284
10.2.7 使用模板成員函數 285
10.3 在ExtJS組件中使用模板 286
10.4 使用模板的優勢 288
10.5 Ext.view.View數據視圖類詳解 288
10.6 本章小結 291
第11章 數據模型 292
11.1 ExtJS數據模型基礎 292
11.2 Model數據實體模型 293
11.2.1 創建實體 295
11.2.2 Ext.data.validations數據驗證 296
11.2.3 數據代理（讀取與保存） 299
11.2.4 Ext.data.HasManyAssociation一對多關係 300
11.2.5 Ext.data.BelongsToAssociation多對一關係 303
11.3 Proxy數據代理 306
11.3.1 Ext.data.proxy.Proxy 307
11.3.2 Ext.data.proxy.Client 307
11.3.3 Ext.data.proxy.Memory 307
11.3.4 Ext.data.proxy.WebStorage 308
11.3.5 Ext.data.proxy.LocalStorage 309
11.3.6 Ext.data.proxy.SessionStorage 310
11.3.7 Ext.data.proxy.Server 310
11.3.8 Ext.data.proxy.Ajax 311
11.3.9 Ext.data.proxy.Rest 315
11.3.10 Ext.data.proxy.JsonP 316
11.3.11 Ext.data.proxy.Direct 318
11.4 Reader數據讀取器 319
11.4.1 Ext.data.reader.Reader 320
11.4.2 Ext.data.reader.Json 320
11.4.3 Ext.data.reader.Xml 323
11.4.4 Ext.data.reader.Array 324
11.5 Writer數據寫入器 325
11.5.1 Ext.data.writer.Writer 325
11.5.2 Ext.data.writer.Json 326
11.5.3 Ext.data.writer.Xml 327
11.6 Store數據集 327
11.6.1 Ext.data.AbstractStore 327
11.6.2 Ext.data.Store 328
11.6.3 Ext.data.ArrayStore、Ext.data.JsonStore及Ext.data.XmlStore 333
11.6.4 Ext.data.DirectStore和Ext.data.JsonPStore 334
11.7 本章小結 335
第12章 Grid組件 336
12.1 表格面板Ext.grid.Panel 337
12.2 表格列Column 339
12.2.1 布爾列Ext.grid.column.Boolean 340
12.2.2 數字列Ext.grid.column.Number 340
12.2.3 日期列Ext.grid.column.Date 340
12.2.4 動作列Ext.grid.column.Action 341
12.2.5 模板列Ext.grid.column.Template 343
12.2.6 行號列Ext.grid.RowNumberer 343
12.2.7 自定義渲染函數 344
12.3 選擇模式Selection 345
12.3.1 選擇模式 Ext.selection.Model 345
12.3.2 單元格選擇模式Ext.selection.CellModel 346
12.3.3 行選擇模式Ext.selection.RowModel 348
12.3.4 複選框選擇模式Ext.selection.CheckboxModel 348
12.4 表格特性Feature 349
12.4.1 表格行體Ext.grid.feature.RowBody 349
12.4.2 表格彙總Ext.grid.feature.Summary 351
12.4.3 表格分組Ext.grid.feature.Grouping 352
12.4.4 分組彙總Ext.grid.feature.GroupingSummary 353
12.5 表格插件plugin 354
12.5.1 單元格編輯插件Ext.grid.plugin.CellEditing 354
12.5.2 行編輯插件Ext.grid.plugin.RowEditing 356
12.5.3 拖曳插件Ext.grid.plugin.DragDrop 357
12.6 屬性表格property.Grid 359
12.7 表格分頁 361
12.8 本章小結 362
第13章 Tree組件 363
13.1 樹形面板Ext.tree.Panel 363
13.1.1 多列樹 364
13.1.2 帶複選框的樹 366
13.1.3 樹面板間的拖曳 366
13.2 Ext.data.TreeStore 368
13.2.1 分級加載樹節點 368
13.2.2 整體加載樹節點 370
13.3 本章小結 371
第14章 ExtJS與服務端框架的整合 372
14.1 XML與JSON的生成 372
14.1.1 XStream基礎 372
14.1.2 JSON-lib簡介 376
14.2 ExtJS與Struts的整合方式 378
14.3 ExtJS與Struts 2的整合方式 380
14.3.1 Struts 2生成JSON數據 381
14.3.2 Struts 2生成XML數據 383
14.4 本章小結 384
第15章 主題 385
15.1 Sass和Compass概述 385
15.1.1 Sass簡介 385
15.1.2 Compass簡介 385
15.2 ExtJS主題樣式開發 387
15.2.1 基本配置文件config.rb 387
15.2.2 定製主題 388
15.3 組件UI開發 389
15.3.1 組件UI混入函數介紹 390
15.3.2 開發面板組件UI 391
15.4 本章小結 393
第16章 Ext.Direct 394
16.1 如何配置和使用Ext.Direct 394
16.1.1 支持類庫的下載 394
16.1.2 配置服務器端功能 495
16.1.3 配置客戶端 400
16.1.4 遠程調用實例 402
16.1.5 本章小結 408
第17章 Draw圖形 409
17.1 常見瀏覽器繪圖技術介紹及對比 409
17.2 精彩的圖形世界 410
17.3 ExtJS圖形包 410
17.3.1 Ext.draw.Component圖形組件詳解 411
17.3.2 Ext.draw.Sprite子畫面組件詳解 411
17.3.3 繪製基本圖形 412
17.3.4 繪製不規則圖形 413
17.3.5 繪製文字 414
17.3.6 線性漸變 415
17.3.7 圖形旋轉 417
17.3.8 動態變換 418
17.3.9 拖曳縮放 419
17.3.10 拖曳移動 420
17.4 本章小結 421
第18章 Chart圖表 422
18.1 Ext.chart圖表組件概述 422
18.2 座標軸組件詳解 423
18.2.1 Ext.chart.axis.Numeric數值軸 425
18.2.2 Ext.chart.axis.Category分類軸 426
18.2.3 Ext.chart.axis.Time時間軸 426
18.2.4 Ext.chart.axis.Gauge儀表軸 427
18.2.5 Ext.chart.axis.Radial雷達軸 427
18.3 圖表序列詳解 427
18.3.1 Ext.chart.series.Pie餅狀圖 428
18.3.2 Ext.chart.series.Cartesian直角座標系圖表 431
18.3.3 Ext.chart.series.Bar條形圖 432
18.3.4 Ext.chart.series.Column柱狀圖 433
18.3.5 Ext.chart.series.Line折線圖 435
18.3.6 Ext.chart.series.Scatter散點圖 437
18.3.7 Ext.chart.series.Area面積圖 438
18.3.8 Ext.chart.series.Radar雷達圖 440
18.3.9 Ext.chart.series.Gauge儀表圖 442
18.4 在圖表中使用主題 443
18.5 複合圖表 446
18.6 圖表與表格 446
18.7 本章小結 449
附錄A 450