深入淺出Ext JS(第3版)

內容介紹

在以用戶為中心的時代,套用的界面外觀變得越來越重要。然而,很多程式設計師都缺乏美術功底,要開發出界面美觀的套用實屬不易,而Ext JS為廣大程式設計師解決了這一難題。它有豐富多彩的界面和強大的功能,是開發具有炫麗外觀的RIA套用的最佳選擇。
本書是《深入淺出Ext JS》的第3版,不僅對上一版的內容進行了增補,還詳細討論了 Ext JS 4.2的新特性,比如無需Flash支持的繪圖功能、基於此實現的各種圖表功能、動態刷新的表格滾動視圖外掛程式、遲來的表格鎖定外掛程式、最新提供的MVC架構和自動載入腳本功能等。此外,我們還在最後一章增加了一個實際的複雜實例,演示了MVC是如何影響我們的開發過程的。
本書注重理論與實踐相結合,適合各層次的Web開發人員閱讀。

作者介紹

徐會生
百度高級軟體研發工程師,從事多年企業級項目研發,擅長許可權與流程相關領域。他是國內探索Ext JS的先驅之一,精通UI開發,業餘時間為社區撰寫了大量開源方面的文章。

作品目錄

目 錄
第1章  Ext概述1
1.1  何為Ext1
1.1.1  Ext版本變遷2
1.1.2  Ext到底是收費的還是免費的3
1.2  下載Ext發布包3
1.3  查看Ext自帶的API和示例4
1.3.1  絢麗的產品文檔4
1.3.2  豐富的組件庫6
1.3.3  更多高級組件6
1.4  第一個示例Hello World7
1.4.1  直接使用下載的發布包7
1.4.2  在項目中使用Ext9
1.5  調試工具Firebug9
1.6  開發中的常見問題12
1.6.1  有些示例必須放在伺服器上才能看到效果12
1.6.2  IE瀏覽器逗號問題13
1.6.3  Ext的漢化13
1.7  小結13
第2章  Ext框架基礎14
2.1  面向對象的基礎架構14
2.1.1  創建新類14
2.1.2  對象繼承15
2.1.3  多重繼承15
2.1.4  自動生成代碼16
2.2  統一的組件模型17
2.2.1  Ext.Component17
2.2.2  Ext.Panel18
2.2.3  Ext.Container18
2.3  完善的事件機制19
2.3.1  自定義事件20
2.3.2  瀏覽器事件21
2.3.3  Ext.EventObjectImpl22
2.3.4  Ext.util.Observable24
2.3.5  Ext.EventManager26
2.4  小結28
第3章  表格控制項29
3.1  表格的特性簡介29
3.2  製作一個簡單的表格30
3.3  表格常用功能詳解33
3.3.1  部分屬性功能33
3.3.2  自主決定每列的寬度35
3.3.3  讓表格支持按列排序36
3.3.4  解決中文排序38
3.3.5  顯示日期類型數據40
3.4  表格渲染40
3.5  給表格的行和列設定顏色44
3.6  自動顯示行號和複選框45
3.6.1  自動顯示行號45
3.6.2  複選框47
3.7  選擇模型48
3.8  表格視圖——Ext.grid.GridView49
3.9  表格分頁50
3.9.1  為表格添加分頁工具條50
3.9.2  通過後台腳本獲得分頁數據51
3.9.3  分頁工具條顯示在表格的頂部55
3.9.4  讓Ext支持前台分頁56
3.10  後台排序57
3.11  多重排序59
3.12  可編輯表格控制項——EditorGrid60
3.12.1  製作一個簡單的EditorGrid60
3.12.2  添加一行數據61
3.12.3  保存修改結果63
3.12.4  限制輸入數據的類型64
3.13  屬性表格控制項——PropertyGrid68
3.13.1  簡介68
3.13.2  只能看不能動的PropertyGrid69
3.14  分組表格控制項——GroupingGrid69
3.14.1  分組表格簡介69
3.14.2  分組表格視圖70
3.15  可拖放的表格72
3.15.1  通過拖放改變表格的大小72
3.15.2  在同一個表格里拖放73
3.15.3  表格之間的拖放74
3.16  表格與右鍵選單74
3.17  基於表格的擴展外掛程式75
3.17.1  行編輯器75
3.17.2  進度條分頁組件76
3.17.3  緩衝式表格視圖77
3.17.4  分組表頭77
3.17.5  鎖定列79
3.17.6  樹形表格80
3.17.7  表格過濾組件82
3.18  小結84
第4章  表單與輸入控制項85
4.1  製作表單85
4.2  FormPanel和BasicForm詳解86
4.3  Ext支持的輸入組件86
4.3.1  控制項繼承圖87
4.3.2  表單控制項87
4.3.3  基本輸入控制項Ext.form.Field90
4.3.4  文本輸入控制項Ext.form.TextField92
4.3.5  多行文本輸入控制項Ext.form.TextArea93
4.3.6  日期輸入控制項Ext.form.DateField93
4.3.7  時間輸入控制項Ext.form.TimeField94
4.3.8  線上編輯器Ext.form.HtmlEditor95
4.3.9  隱藏域Ext.form.Hidden95
4.3.10  如何使用input type= "image"96
4.4  ComboBox詳解96
4.4.1  ComboBox簡介96
4.4.2  將Select轉換成ComboBox98
4.4.3  ComboBox結構詳解98
4.4.4  ComboBox讀取遠程數據100
4.4.5  ComboBox的高級配置101
4.4.6  監聽用戶選擇的數據103
4.4.7  使用本地數據實現省、市、縣級聯105
4.4.8  使用後台數據實現省、市、縣級聯108
4.4.9  添加MultiSelect和ItemSelector擴展以及示例110
4.5  複選框和單選按鈕113
4.5.1  複選框113
4.5.2  單選按鈕114
4.5.3  CheckboxGroup和RadioGroup控制項115
4.6  滑動條表單控制項119
4.7  表單布局121
4.7.1  默認的平鋪布局121
4.7.2  平行分列布局122
4.7.3  在布局中使用fieldset125
4.7.4  在fieldset中使用布局127
4.7.5  自定義布局129
4.8  數據校驗131
4.8.1  輸入不能為空131
4.8.2  最大長度和最小長度132
4.8.3  藉助vtype132
4.8.4  自定義校驗規則133
4.8.5  算不上校驗的NumberField134
4.8.6  使用後台返回的校驗信息135
4.9  使用表單提交數據136
4.9.1  Ext默認的提交形式136
4.9.2  使用HTML原始的提交形式138
4.9.3  單純Ajax139
4.9.4  檔案上傳139
4.9.5  檔案上傳控制項140
4.10  自動把數據填充到表單中141
4.11  小結143
第5章  樹形結構144
5.1  TreePanel的基本使用144
5.1.1  創建一棵樹144
5.1.2  為樹添加枝和葉145
5.1.3  樹形的配置146
5.1.4  使用TreeStore獲得數據147
5.1.5  使用JSP提供後台數據150
5.1.6  通過XML載入樹形153
5.2  樹的事件154
5.3  右鍵選單155
5.4  修改節點的默認圖示156
5.5  從節點彈出對話框157
5.6  節點提示信息158
5.7  為節點設定超連結159
5.8  樹形的拖放160
5.8.1  節點拖放的3種形式161
5.8.2  葉子不能append162
5.8.3  判斷拖放的目標162
5.8.4  樹之間的拖放164
5.9  對樹進行排序165
5.10  帶Checkbox的樹形166
5.11  表格與樹形的結合167
5.12  更多樹形的高級套用170
5.12.1  如何選中樹的某個節點170
5.12.2  刷新樹的所有節點170
5.12.3  借用grid的緩衝視圖外掛程式170
5.12.4  借用grid的鎖定外掛程式170
5.13  小結171
第6章  布局172
6.1  布局的用途172
6.2  最簡單的布局——FitLayout175
6.3  常用的框線布局——BorderLayout177
6.3.1  設定子區域的大小178
6.3.2  使用split並限制它的範圍180
6.3.3  子區域的展開和摺疊182
6.4  製作伸縮選單的布局——Accordion186
6.5  實現操作嚮導的布局——CardLayout187
6.6  控制位置和大小的布局——AnchorLayout和AbsoluteLayout190
6.7  表單專用的布局——FormLayout195
6.8  分列布局——ColumnLayout197
6.9  表格狀布局——TableLayout199
6.10  BoxLayout——HBox200
6.11  BoxLayout——VBox201
6.12  Ext.TabPanel203
6.12.1  標籤面板的滾動選單206
6.12.2  豎直分組的標籤面板206
6.13  與布局相關的其他知識207
6.13.1  超類Ext.Container的公共配置與xtype的概念208
6.13.2layout的超類Ext.layout.ContainerLayout208
6.13.3  不指定任何布局時會發生的情況209
6.13.4  使用Viewport對整個頁面進行布局210
6.13.5  使用嵌套實現複雜布局211
6.14  小結213
第7章  彈出視窗214
7.1  Ext.MessageBox214
7.1.1  Ext.MessageBox.alert()214
7.1.2  Ext.MessageBox.confirm()215
7.1.3  Ext.MessageBox.prompt()216
7.2  對話框的更多配置216
7.2.1  可以輸入多行的輸入框216
7.2.2  自定義對話框的按鈕217
7.2.3  進度條218
7.2.4  動畫效果219
7.3  Ext.Window的常用屬性220
7.3.1  創建視窗220
7.3.2  視窗的最大化和最小化221
7.3.3  視窗的隱藏與銷毀222
7.3.4  防止視窗超出瀏覽器邊界223
7.3.5  設定視窗中的按鈕224
7.3.6  視窗的其他配置選項226
7.4  視窗分組227
7.5  向視窗中放入各種控制項229
7.5.1  在視窗中加入表格229
7.5.2  在視窗中加入表單230
7.5.3  複雜布局231
7.6  小結233
第8章  工具條和選單234
8.1  簡單選單234
8.2  向選單中添加分隔線236
8.3  多級選單237
8.4  高級選單239
8.4.1  多選選單和單選選單239
8.4.2  日期選單241
8.4.3  顏色選單242
8.4.4  在選單中添加其他組件243
8.4.5  使用Ext.menu.MenuMgr統一管理選單244
8.5  工具條組件詳解246
8.5.1  Ext.Toolbar.Button247
8.5.2  Ext.Toolbar.TextMenu247
8.5.3  Ext.Toolbar.Spacer248
8.5.4  Ext.Toolbar.Separator248
8.5.5  Ext.Toolbar.Fill249
8.5.6  Ext.Toolbar. SplitButton249
8.5.7  為工具條添加HTML標籤251
8.5.8  為工具條添加輸入控制項252
8.6  分頁工具條252
8.6.1  Ext.PagingToolbar的基本用法252
8.6.2  向Ext.PagingToolbar添加按鈕組件254
8.7  右鍵彈出選單255
8.8  處理工具條溢出256
8.9  工具條中的分組按鈕257
8.10  更多工具條外掛程式258
8.11  狀態欄259
8.12  小結262
第9章  數據存儲與傳輸263
9.1  Ext.data命名空間下的常用組件簡介263
9.2  Ext.data.Connection263
9.3  Ext.data.Record265
9.4  Ext.data.Store266
9.4.1  基本套用266
9.4.2  對數據進行排序267
9.4.3  從store中獲取數據268
9.4.4  更新store中的數據269
9.4.5  載入及顯示數據271
9.4.6  其他功能272
9.5  常用Proxy273
9.5.1  MemoryProxy273
9.5.2  HttpProxy273
9.5.3  ScriptTagProxy274
9.6  常用Reader275
9.6.1  ArrayReader275
9.6.2  JsonReader275
9.6.3  XmlReader277
9.7  高級store278
9.8  Ext中的Ajax280
9.8.1  最容易看到的Ext.Ajax280
9.8.2  使用Ajax獲取和提交數據時出現亂碼281
9.9  關於scope和bind()281
9.10  Ext Direct283
9.10.1  簡介283
9.10.2  洞悉Ext Direct的原理285
9.10.3  使用directjngine支持Ext Direct286
9.11  小結289
第10章  用戶擴展與外掛程式290
10.1  介紹用戶擴展290
10.2  編寫用戶擴展所需的基礎知識294
10.2.1  繼承模型294
10.2.2  了解Component的生命
周期298
10.3  編寫自定義用戶擴展299
10.4  介紹Ext的外掛程式體系300
10.5  常用擴展組件一:UploadDialog303
10.6  常用擴展組件二: Ext.ux.IFrame306
10.7  小結309
第11章  拖放310
11.1  拖放簡介310
11.2  拖放的簡單套用310
11.3  拖放組件體系311
11.4  拖放的事件313
11.5  高級拖放316
11.5.1  基礎316
11.5.2  控制柄317
11.5.3  總在最上面318
11.5.4  代理319
11.5.5  分組320
11.5.6  格線325
11.5.7  拖放圓形326
11.5.8  拖放範圍327
11.6  小結329
第12章  實用工具330
12.1  Ext提供的常用函式330
12.1.1  onReady()函式330
12.1.2  以get開頭的函式331
12.1.3  encode()函式和decode()函式334
12.1.4  extend()函式336
12.1.5  apply()函式和applyIf()函式337
12.1.6  namespace()函式337
12.1.7  Ext.each()函式338
12.2  使用DomHelper和Template動態生成HTML339
12.2.1  使用DomHelper生成小片段340
12.2.2  Ext.DomHelper.apply Styles()函式343
12.2.3  模板343
12.2.4  Ext.DomHelper.create Template()函式346
12.2.5  複雜模板XTemplate347
12.3  圖形報表349
12.3.1  柱狀圖350
12.3.2  橫向柱狀圖351
12.3.3  折線圖352
12.3.4  餅狀圖354
12.3.5  柱狀堆疊圖355
12.3.6  橫向柱狀堆疊圖356
12.3.7  混合圖357
12.3.8  drawing359
12.4  懸停提示359
12.4.1  初始化359
12.4.2  註冊提示360
12.4.3  標籤提示360
12.4.4  全局配置361
12.4.5  個體配置361
12.5  用Ext.Utils.CSS切換主題362
12.6  使用fx實現動畫效果364
12.7  小結366
第13章  一個完整的Ext套用367
13.1  確定整體布局368
13.2  使用HTML和CSS設定靜態信息369
13.3  對學生信息進行數據建模370
13.4  在頁面中顯示學生信息列表375
13.5  添加表單編輯學生信息379
13.6  為表單添加提交事件382
13.7  清空表單信息385
13.8  刪除指定的學生信息386
13.9  在表格和表單之間進行數據互動387
13.10  提升載入速度388
13.10.1  對JavaScript進行壓縮混淆388
13.10.2  使用客戶端快取389
13.10.3  使用GZIP壓縮390
13.11  小結392
第14章  套用MVC393
14.1  為啥要用MVC393
14.2  套用MVC實例394
14.3  綜合示例397
14.3.1  整體布局398
14.3.2  左側功能選單399
14.3.3  左側選單與中央內容聯動401
14.3.4  顯示單個功能模組402
14.4  功能詳解405
14.4.1  用戶模組405
14.4.2  組織機構模組408
14.4.3  特殊功能411
14.5  小結413

相關詞條

熱門詞條

聯絡我們