ExtJS Web應用程式開發指南(針對Ext JS 4.0更新)

《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版)》一書中的程式碼與示例提供給讀者，相關程式碼的下載地址為：或。

目錄：
第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