內容簡介
精通JS腳本之ExtJS框架本書附有配套光碟，提供了書中實例的原始碼和視頻教學檔案。
本書可以作為Web開發的自學參考書，也可以作為RIA Web程式開發的培訓教材。
前 言
ExtJS的前身來自於YUI（Yahoo User Interface），經過不斷發展與改進，現在已經成為最完整與成熟的一套構建RIA Web套用的JavaScript基礎庫。利用ExtJS構建的RIA Web套用具有與桌面程式一樣的標準用戶界面與操作方式，並且能夠橫跨不同的瀏覽器平台。ExtJS已經成為開發具有完美用戶體驗的Web套用的新選擇。在RIA Web開發的征途中選擇ExtJS作為克敵制勝的武器，也可以享受ExtJS帶來的類似於Win32編程的原生態快樂。
現在，隨著用戶對體驗的要求越來越高，特別對於Web套用開發者而言，ExtJS無疑是優秀的解決方案，能夠幫助開發者快速實現良好用戶界面的開發。ExtJS是在YUI基礎上拓展出來的，國內用戶數量眾多。ExtJS是開源的，其生命力非常強勁。
本書內容
本書從ExtJS實現的基本功能開始講解RIA Web開發，詳細講解了ExtJS的基本功能、常用的表單、面板和布局、常見的工具類與函式，以及ExtJS對事件的回響。本書結合現今流行的Web框架，融合相關技術套用。考慮到ExtJS與主流服務端框架的整合越來越緊密，本書還特意講解了Struts框架的整合與配置。
本書語言通俗易懂、版式清新，通過大量的實例講解技術。廣大的Web程式設計師可以從本書中找到經典套用的解決方案，RIA Web應用程式開發的愛好者從中也可以找到前進的階梯。本書可以作為Web開發的自學參考書，也可以作為RIA Web程式開發的培訓教材。
第1章介紹了在使用JavaScript時必須掌握的基礎知識，包括JavaScript語言的一些特性、如何編寫JavaScript程式、JavaScript中的數據類型、常量、運算符以及各種流程控制語句等。
第2章介紹了瀏覽器對象模型與基本事件的處理。
第3章介紹了使用ExtJS的準備工作及調試。對調試工具FireBug、開發利器spket進行了詳細的講解。
第4章介紹了ExtJS的事件機制，包括設計模式中的觀察者模式、自定義事件、瀏覽器事件、ExtJS中的事件、各種事件登記方式、高級組件事件及ExtJS鍵盤事件。
第5章介紹了ExtJS組件，包括核心組件、信息提示框組件、進度條組件及實現工具列和選單欄組件。
第6章介紹了ExtJS頁面元素與模板。
第7章介紹了ExtJS中的表單控制項及布局，重點介紹了表單元素文本輸入控制項、多行文本輸入控制項、單選框、複選框、下拉列表框、日期輸入控制項及線上編輯器控制項。
第8章介紹了ExtJS中的表格類布局，其中重點講解了表格屬性功能的套用，自主調整每列的寬度，使表格支持案例排序，解決中文排序、格式化顯示日期類型數據等問題，以及巧妙的渲染表格，給表格的行和列設定顏色。
第9章在第8章的基礎上對表格進行了擴展，講解了表格的擴展功能，表格視圖Ext.grid.GridView及表格分頁的實現，同時還講解了編輯表格控制項EditorGrid、屬性表格控制項PropertyGrid、分組表格控制項Group。
第10章介紹了一棵光禿禿的樹如何成長為一棵枝繁葉茂的樹？樹控制項的事件處理是怎樣的？它的右鍵選單生成及右鍵選單的功能如何使用？如何把TreePanel控制項的默認圖示改為自己的圖示？樹節點之間的拖放是怎么實現的？
第11章主要介紹了ExtJS中的其他類布局。
第12章介紹了Ext.Ajax的request和update方法，如何使用Ajax最佳化項目。
第13章介紹了設計數據驅動模式的概念及使用。
第14章介紹了ExtJS的擴展，其中有ExtJS如何實現集成、ExtJS擴展的相關知識、實現增刪改查功能和實現ExtJS擴展。
第15章介紹了調試JavaScript和HTML的工具的使用（針對Firefox和Internet Explorer瀏覽器），並同時介紹了如何在頁面中查找HTML元素、觀察HTTP訊息和解耦股等的使用技巧。
第16章整合了ExtJS、Struts和Hibernate三大框架完成了商品信息管理系統，同時也講解了ExtJS請求後台功能，完成了對商品的增、刪、改、查操作。
第17章整合了SSH和ExtJS四大框架完成了企業任務管理系統，主要對企業個人任務處理、資料編輯、主管部門計畫處理、部門人員管理、系統管理員的許可權分配等重要需求功能進行了實現。
本書特色
以實際開發經驗為基礎
本書是在編者使用ExtJS開發項目的經驗基礎上編寫的，以實際項目為根本，全面、翔實地介紹了ExtJS開發所需要具備的各種知識和技能，突出了實用性。
示例豐富，實用性強
本書採用理論為主、案例輔助的方式進行講解，以掌握基礎知識為目的，以提高實際開發能力為主旨，融“教”、“學”、“練”於一體。
視頻支持
本書提供一套完整的視頻講座，其總長度大約有13個小時，方便讀者學習。
讀者對象
本書適合初次接觸ExtJS的網頁設計人員閱讀，目標讀者是Web套用前端設計者與開發者，尤其適合那些已經掌握了HTML、CSS和JavaScript等基礎知識，希望全面學習ExtJS庫的讀者。本書也可作為大、中院校相關專業和社會培訓班的教材。
本書主要由趙俊昌、祝紅濤、吳越人編寫，其他參與編寫、資料整理、程式開發工作的人員還有張浩華、段韶治、馬向林、李劍龍、李振、郝春雨、王詠梅、崔群法、鄭千忠、孫宇霞等
目 錄
1.1 JavaScript語言概述 2
1.1.1 JavaScript簡介 2
1.1.2 JavaScript特點 3
1.1.3 JavaScript與Java 3
1.2 第一個JavaScript程式 5
1.2.1 嵌入JavaScript 5
1.2.2 連結外部JavaScript檔案 6
1.2.3 注意事項 6
1.3 基礎語法 8
1.3.1 數據類型 8
1.3.2 變數與常量 9
1.3.3 運算符 11
1.4 流程控制語句 13
1.4.1 if條件語句 13
1.4.2 switch條件語句 17
1.4.3 while循環語句 21
1.4.4 do while循環語句 21
1.4.5 for循環語句 22
1.4.6 for in循環語句 23
1.4.7 try catch finally語句 24
1.4.8 其他語句 26
第2章 JavaScript瀏覽器對象模型與事件處理 28
2.1 瀏覽器對象模型 29
2.1.1 文檔對象 29
2.1.2 表單及其元素對象 32
2.1.3 瀏覽器信息對象 35
2.1.4 視窗對象 36
2.1.5 網址對象 38
2.1.6 歷史記錄對象 40
2.2 基本事件處理 41
2.3 2級DOM事件模型 42
2.3.1 事件傳播 42
2.3.2 註冊事件處理程式 43
2.3.3event對象44
2.4 常用事件 46
2.4.1 鍵盤事件 46
2.4.2 滑鼠事件 47
2.4.3 頁面事件 48
第3章 開始使用ExtJS 50
3.1 ExtJS概述 51
3.1.1 ExtJS簡介 51
3.1.2 ExtJS中的基本概念 51
3.1.3 ExtJS與常見JavaScript庫的介紹與對比 52
3.2 創建第一個程式 54
3.2.1 下載ExtJS 54
3.2.2 部署到開發工具中 55
3.2.3 編寫HelloWorld.html 55
3.2.4 運行調試ExtJS 56
3.3 輔助開發 56
3.3.1 調試工具Firebug 56
3.3.2 開發利器Spket 61
第4章 ExtJS事件機制 68
4.1 設計模式——觀察者模式 69
4.2 自定義事件 69
4.3 瀏覽器事件 71
4.4 ExtJS中的事件 73
4.4.1 Function.call()/apply()方法 73
4.4.2 函式的作用域 75
4.4.3 Ext.lib.Event事件 75
4.4.4 Ext.util.Observable事件 76
4.4.5 Ext.EventManager事件 79
4.4.6 Ext.EventObject事件 82
4.5 各種事件登記方式 85
4.5.1 傳統式登記 85
4.5.2 內聯式登記 85
4.5.3 Dom Level2登記 86
4.6 高級組件事件 86
4.7 ExtJS鍵盤事件 88
第5章 ExtJS組件 90
5.1 核心組件 91
5.1.1 ExtJS組件結構 91
5.1.2 Ext.Component 93
5.1.3 Ext.BoxComponent 94
5.1.4 Ext.Container 96
5.1.5 Ext.Panel 97
5.1.6 Ext.TabPanel 100
5.2 信息提示框組件 102
5.2.1 Ext.MessageBox簡介 102
5.2.2 Ext.MessageBox.alert() 102
5.2.3 Ext.MessageBox.confirm() 103
5.2.4 Ext.MessageBox.prompt() 103
5.2.5 Ext.MessageBox.wait() 105
5.2.6 Ext.MessageBox.show() 105
5.2.7 Ext.MessageBox的其他功能 106
5.3 進度條組件 107
5.3.1 Ext.ProgressBar簡介 107
5.3.2 手工模式的進度條 108
5.3.3 自動模式的進度條 109
5.3.4 自定義樣式的進度條 111
5.4 工具列和選單欄 112
5.4.1 Ext.Toolbar簡介 112
5.4.2 只包含按鈕的簡單工具列 113
5.4.3 包含多種元素的複雜工具列 115
5.4.4 Ext.menu.Menu簡介 116
5.4.5 最簡單的選單欄 116
5.4.6 創建三級或多級選單 117
5.4.7 具有選擇框的選單 119
第6章 頁面元素與模板 121
6.1 構成用戶界面的元素 122
6.2 獲取頁面元素 122
6.3 元素常見的使用方法 123
6.3.1 常見的“顯示/隱藏”方法 124
6.3.2 常見的“內容控制”方法 125
6.3.3 常見的“操控DOM”方法 126
6.3.4 常見的“尺寸大小/定位”方法 128
6.3.5 常見的“特效動畫”方法 129
6.3.6 DomHelper簡介 130
6.4 DomQuery入門 131
6.4.1 元素選擇符selector131
6.4.2 屬性選擇符Attributes Selectors 132
6.4.3 CSS值元素選擇符 132
6.4.4 Ext.query與Ext.select 133
6.5 套用模板 133
6.5.1 Ext.Template 133
6.5.2 Ext.XTemplate 135
第7章 設計表單類布局 137
7.1 Form表單簡介 138
7.1.1 Form表單的基本配置 138
7.1.2 ExtJS對Form表單的封裝 141
7.2 ExtJS的表單組件 145
7.2.1 文本輸入控制項Ext.form.TextField 145
7.2.2 多行文本輸入控制項Ext.form.TextArea 148
7.2.3 單選框 150
7.2.4 複選框 152
7.2.5 下拉列表框 155
7.2.6 日期輸入控制項Ext.form.DateField 158
7.2.7 線上編輯器Ext.form.HtmlEditor 159
7.3 ExtJS表單組件的綜合套用 161
第8章 設計表格類布局 167
8.1 表格簡介 168
8.1.1 表格的基本屬性 168
8.1.2 製作第一個表格 170
8.2 表格常用功能詳解 174
8.2.1 主要屬性功能 174
8.2.2 自定義列寬度 177
8.2.3 執行按列排序 180
8.2.4 解決中文排序 180
8.2.5 格式化顯示日期類型數據 184
8.3 美化表格 185
8.4 設定表格背景顏色 188
8.5 顯示行號和複選框 190
8.5.1 顯示行號 190
8.5.2 引用複選框 193
第9章 表格的高級功能 194
9.1 表格視圖——Ext.grid.GridView 195
9.2 表格分頁 198
9.2.1 添加表格分頁顯示工具條 198
9.2.2 從後台腳本獲得分頁數據 199
9.2.3 在表格頂部顯示分頁工具條 202
9.2.4 實現前台分頁效果 203
9.3 可編輯表格控制項——EditorGrid 204
9.3.1 製作第一個EditorGrid 205
9.3.2 添加一行數據 207
9.3.3 保存修改結果 212
9.3.4 驗證EditGrid中的數據 214
9.3.5 限制輸入數據的類型 219
9.4 PropertyGrid屬性表格控制項 223
9.4.1 PropertyGrid簡介 223
9.4.2 唯讀的PropertyGrid 224
9.4.3 對name列強制排序並獲得value 224
9.4.4 自定義編輯器 226
9.5 分組表格控制項——Group 227
9.5.1 分組表格簡介 227
9.5.2 Ext.grid.GroupingView的配置操作 229
9.6 可拖放的表格 231
9.6.1 拖放改變表格的大小 231
9.6.2 在同一個表格里拖放 233
9.6.3 表格之間的拖放 235
9.6.4 表格與樹之間的拖放 238
第10章 設計樹狀結構布局 241
10.1 TreePanel的基本使用 242
10.1.1 創建一棵樹 242
10.1.2 為樹生枝展葉 243
10.1.3 樹形的配置 245
10.1.4 使用TreeLoader獲得數據 248
10.1.5 讀取本地JSON數據 251
10.2 樹的事件 253
10.3 右鍵選單 256
10.4 修改節點的默認圖示 261
10.5 從節點彈出對話框 262
10.6 節點提示信息 264
10.7 為節點設定超連結 266
10.8 樹形的拖放 267
10.8.1 節點拖放的3種形式 267
10.8.2 葉子不能append 268
10.8.3 判斷拖放的目標 269
10.8.4 樹之間的拖放 272
10.9 樹形過濾器TreeFilter 275
10.10 利用TreeSorter對樹進行排序 281
10.11 樹形節點視圖——Ext.tree.TreeNodeUI 282
10.12 表格與樹形的結合——Ext.ux.tree.ColumnTree 284
第11章 其他布局類簡介 289
11.1 標準布局類 290
11.1.1 摺疊布局——AccordionLayout 291
11.1.2 框線布局——BorderLayout292
11.1.3 卡片式布局——CardLayout 294
11.1.4 列布局——ColoumnLayout 296
11.1.5 錨點布局——AnchorLayout 300
11.1.6 自適應布局——FitLayout 302
11.1.7 ContainerLayout 303
11.2 與布局有關的其他知識 304
11.2.1 父類Ext.Container公共配置與xtype的概念 305
11.2.2 使用Viewport 306
11.2.3 實現表單元素橫排 307
第12章 ExtJS對Ajax的支持 310
12.1 Ext.Ajax介紹 311
12.1.1 Ext.Ajax.request方法詳解 311
12.1.2 Ext.Ajax.request操作示例 312
12.1.3 Ext.Ajax.request提交XML數據 314
12.2 Ext.Updater基礎 315
12.2.1 Ext.Updater.update方法 316
12.2.2 Ext.Updater.update操作示例 318
12.3 利用Ajax最佳化Web套用框架321
12.3.1 多級聯動選單 321
12.3.2 Ajax修改用戶密碼 323
12.3.3 自動保存的網路記事本325
12.3.4 網頁計算器 326
第13章 設計數據驅動模式 330
13.1 XML/JSON數據格式比較 331
13.2 容器類MixedCollection 332
13.3 數據存儲基本單元Record與dataField 333
13.3.1 dataField 335
13.3.2 Record 335
13.4 數據存儲store 337
13.4.1 數據載入 337
13.4.2 對數據進行排序 340
13.4.3 從store 中獲取數據 341
13.4.4 更新store 中的數據 342
13.4.5 載入及顯示數據 344
13.5 數據代理 345
13.5.1 Ext.data.DataProxy 345
13.5.2 Ext.data.MemoryProxy 346
13.5.3 Ext.data.HttpProxy 347
13.5.4 Ext.data.ScriptTagProxy 347
13.6 數據讀取器 349
13.6.1 Ext.data.DataReader 349
13.6.2 Ext.data.ArrayReader 349
13.6.3 Ext.data.JsonReader 349
13.6.4 Ext.data.XmlReader 350
13.7 Ext.ux.DWR 352
13.7.1 Ext.data.DwrProxy 352
13.7.2 Ext.data.DWRTreeLoader 354
13.7.4 Web服務端配置 355
13.7.5 服務層接口 356
第14章 ExtJS擴展 358
14.1 利用Ext.extend實現繼承 359
14.2 與ExtJS擴展相關的預備知識 363
14.2.1 定義命名空間 364
14.2.2 使用xtype 365
14.3 用戶擴展和外掛程式 366
14.3.1 編寫自定義用戶擴展 367
14.3.2 常用外掛程式UploadDialog 368
14.3.3 常用外掛程式ManagedIFrame 369
14.4 使用ExtJS製作Flash統計報表 370
14.4.1 柱狀圖 370
14.4.2 折線圖 372
14.4.3 餅狀圖 373
14.4.4 柱狀棧圖 374
第15章 調試JavaScript與HTML 376
15.1 Firebug的基本使用 377
15.1.1 開啟或關閉Firebug 377
15.1.2 控制台 378
15.2 Firebug的套用 379
15.2.1 原始碼調試 380
15.2.2 CSS調試 386
15.2.3腳本調試389
15.3 跟蹤網路傳輸狀態 393
15.4 在腳本檔案中加入調試命令 395
15.5 在IE中使用Firebug 396
15.5.1 前端調試利器debugbar397
15.5.2 IE下的優秀JavaScript調試工具Companion.JS 400
15.5.3 DebugBar和Companion.JS的基本操作 401
15.6 調試技巧 403
15.6.1 在Firebug中直接調試腳本 403
15.6.2 調試代碼運行速度 405
15.6.3 查看對象屬性 407
第16章 ExtJS案例：商品信息管理系統 412
16.1 商品信息管理系統功能介紹 413
16.2 資料庫設計和實現 413
16.2.1 資料庫概念結構設計413
16.2.2 資料庫表設計 414
16.3 為項目做好準備 415
16.4 登錄界面 417
16.5 欄目載入 421
16.6 為項目換膚 426
16.7 商品信息管理 428
16.7.1 商品信息的查詢 428
16.7.2 商品信息的添加 436
16.7.3 商品信息的刪除 441
16.7.4 商品信息的更新 443
第17章 ExtJS案例：企業任務管理系統 446
17.1 系統概述 447
17.2 需求分析 447
17.3 資料庫設計 449
17.4 員工任務管理 452
17.4.1 個人任務處理 453
17.4.2 個人資料編輯 458
17.5 主管任務管理 462
17.5.1 部門計畫處理 462
17.5.2 部門人員管理 469
17.6 系統管理員許可權分配 474
