?

Extjs作為一款優秀的JS前端開發框架以其良好的架構、豐富的UI組件庫、完善的文檔和社區支持等諸多優點擁有廣泛的市場應用空間，開發人員無需過多的關注HTML、CSS甚至各種常用JS算法，只需把精力放在業務邏輯上，利用各種組件的相互組合調用便可輕松而高效的開發出系統的前端頁面。

?

Extjs5在之前版本的基礎上又推出了一系列實用而強大的功能，諸如：MVVM架構，路由器，雙向數據綁定，平板支持，使Extjs的開發更加便捷，產品的用戶體驗更好！并且Extjs仍在持續更新中。

?

目前市面上還沒有詳細講解Extjs5新特性及其實戰應用的教程。講師通過實際的開發案例，將Extjs的基礎知識和Extjs5的新特性融匯貫通，詳細的講解了用Extjs5（MVVM+MVC并用）開發應用的步驟、方法和技巧！同時采用Java做為后端開發語言，詳細講解了如何整合spring，spring mvc, mybatis等常用第三方框架，實現數據的前后端打通。

?

?

1.課程研發環境

開發工具:eclipse，sencha cmd；

數據庫工具:mysql5，mysql workbench，navicat premium；

其他工具:JsonView；

?

2.內容簡介

本教程從Extjs5的開發環境搭建開始，講解了Extjs5的項目結構（包括核心文件的作用），Extjs類的一些基本概念，布局、事件、MVVM和MVC架構、路由器，數據綁定等的概念和實際使用，同時講解了開發中常用的extjs UI組件： panel, tabpanel,Tree, grid, form表單（及其驗證方法），數據組件： store，model等，講解了動態菜單、單表和子父表模塊等的開發方法以及后端spring,spring mvc,mybatis的整合和數據打通等。授人以魚不如授人以漁，課程重在培養學員快速學習快速開發以及分析和解決問題的能力！

?

1、 Extjs5概述及預期學習效果

2、 Extjs5工程目錄結構和核心文件分析

3、 信息管理系統通用功能歸納 - 電商企業支撐系統演示

4、 信息管理系統通用功能歸納 - 通用功能提煉

5、 前端開發 - 環境搭建

6、 前端開發 - 改變默認風格,初試數據綁定

7、 前端開發 - 理解Extjs類1（類定義，實例化，單例）

8、 前端開發 - 理解Extjs類2（類繼承：單繼承、多繼承和覆蓋）

9、 前端開發 - 理解Extjs類3（靜態屬性和方法： 可繼承的、不可繼承的）

10、前端開發 - 理解Extjs類4（類引用，自動getter和setter）

11、前端開發 - 理解Extjs類5（xtype,alias,alternateClassName）

12、前端開發 - 理解Extjs類6（模板方法，事件，自定義事件）

13、前端開發 - 理解Extjs類7（命名規范）

14、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）1 （absolute， accordion）

15、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）2 （border）

16、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）3 （card）

17、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）4 （column）

18、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）5 （hbox,vbox）

19、前端開發 - 主頁面 - 總體布局 （常用頁面布局方式...）6 （其他布局方式）

20、前端開發 - 主頁面 - 構建頂欄 （實現一： 利用 container，component，menu） 1

21、前端開發 - 主頁面 - 構建頂欄 （實現一： 利用 container，component，menu） 2

22、前端開發 - 主頁面 - 構建頂欄 （實現一： 利用 container，component，menu） 3

23、前端開發 - 主頁面 - 構建頂欄 （實現一： 利用 container，component，menu） 4

24、前端開發 - 主頁面 - 構建頂欄 （實現二： 利用 toolbar）

25、前端開發 - 主頁面 - 構建導航菜單 ( panel + treepanel 基于配置可管理的菜單 ) ?1

26、前端開發 - 主頁面 - 構建導航菜單 ( panel + treepanel 基于配置可管理的菜單 ) ?2

27、前端開發 - 主頁面 - 構建導航菜單 ( panel + treepanel 基于配置可管理的菜單 ) ?3

28、前端開發 - 主頁面 - 模塊開發架構 1（利用treepanel事件 和 panel 動態載入） 1

29、前端開發 - 主頁面 - 模塊開發架構 1（利用treepanel事件 和 panel 動態載入） 2

30、前端開發 - 主頁面 - 模塊開發架構 1（利用treepanel事件 和 panel 動態載入） 3

31、前端開發 - 主頁面 - 模塊開發架構 2（利用 extjs 反射機制 化繁為簡）

32、前端開發 - 主頁面 - 模塊開發架構 3（利用 全局控制器）

33、前端開發 - 主頁面 - 模塊開發架構 4（利用 路由器） 1

34、前端開發 - 主頁面 - 模塊開發架構 4（利用 路由器） 2

35、前端開發 - 主頁面 - 模塊開發架構 4（利用 路由器） 3

36、前端開發 - 主頁面 - 模塊開發架構 5（利用 tabpanel）1

37、前端開發 - 主頁面 - 模塊開發架構 5（利用 tabpanel）2

38、前端開發 - 主頁面 - 模塊開發架構 5（利用 tabpanel）3

39、前端開發 - Extjs 組件查找 1（利用 ComponentQuery ?- ?基礎查找）1

40、前端開發 - Extjs 組件查找 1（利用 ComponentQuery ?- ?基礎查找）2

41、前端開發 - Extjs 組件查找 2（ComponentQuery ?- ?屬性查找和偽類） 1

42、前端開發 - Extjs 組件查找 2（ComponentQuery ?- ?屬性查找和偽類） 2

43、前端開發 - Extjs 組件查找 3（其他查找方式）

44、后端開發 - 后端技術選型和工具安裝 (springmvc+mybatis + mysql+mysql workbench+ Navicat Premium）

45、后端開發 - 后端項目配置(springmvc和mybatis整合，項目包結構安排) ?1

46、后端開發 - 后端項目配置(springmvc和mybatis整合，項目包結構安排) ?2

47、后端開發 - 后端項目配置(springmvc和mybatis整合，項目包結構安排) ?3

48、后端開發 - 后端項目配置(springmvc和mybatis整合，項目包結構安排) ?4

49、后端開發 - 后端項目配置(springmvc和mybatis整合，項目包結構安排) ?5

50、后端開發- ?單表模塊 - 數據建模(數據庫模型設計,建庫建表,前端model) ?1

51、后端開發- ?單表模塊 - 數據建模(數據庫模型設計,建庫建表,前端model) ?2

52、整合開發- ?單表模塊 - 創建列表頁面（利用gridpanel, store, 分頁顯示,數據綁定，延遲載入） 1

53、整合開發- ?單表模塊 - 創建列表頁面（利用gridpanel, store, 分頁顯示,數據綁定，延遲載入） 2

54、整合開發- ?單表模塊 - 創建列表頁面（利用gridpanel, store, 分頁顯示,數據綁定，延遲載入） 3

55、整合開發- ?單表模塊 - 創建列表頁面（利用gridpanel, store, 分頁顯示,數據綁定，延遲載入） 4

56、整合開發- ?單表模塊 - 創建新增（修改）頁面（利用Ext.data.Session，Ext.data.Batch， 表單 , 數據綁定） 1

57、整合開發- ?單表模塊 - 創建新增（修改）頁面（利用Ext.data.Session，Ext.data.Batch， 表單 , 數據綁定） 2

58、整合開發- ?單表模塊 - 創建新增（修改）頁面（利用Ext.data.Session，Ext.data.Batch， 表單 , 數據綁定） 3

59、整合開發- ?單表模塊 - 編寫后端主體(controller, service, dao) ?1

60、整合開發- ?單表模塊 - 編寫后端主體(controller, service, dao) ?2

61、整合開發- ?單表模塊 - 編寫后端主體(controller, service, dao) ?3

62、整合開發- ?單表模塊 - 編寫后端主體(controller, service, dao) ?4

63、整合開發- ?單表模塊 - 遠程過濾和排序 ?1

64、整合開發- ?單表模塊 - 遠程過濾和排序 ?2

65、整合開發- ?單表模塊 - 遠程過濾和排序 ?3

66、整合開發 - ?單表模塊 - 輸入驗證(正則,vtype,validators,自定義field ) ?1

67、整合開發 - ?單表模塊 - 輸入驗證(正則,vtype,validators,自定義field ) ?2

68、整合開發 - ?單表模塊 - 輸入驗證(正則,vtype,validators,自定義field ) ?3

69、整合開發- ?子父表模塊 - (數據建模型建庫建表,后端各層的編寫)?

70、整合開發- ?子父表模塊 - (前端頁面編寫，利用模型關聯,利用override覆蓋官方模塊方法,表格編輯插件) 1

71、整合開發- ?子父表模塊 - (前端頁面編寫，利用模型關聯,利用override覆蓋官方模塊方法,表格編輯插件) 2

72、整合開發- ?子父表模塊 - (前端頁面編寫，利用模型關聯,利用override覆蓋官方模塊方法,表格編輯插件) 3

73、整合開發 - ?動態菜單 - （利用ext.Ajax 從服務器獲取菜單數據動態組裝）

74、學習總結與回顧

?

?

?

?

?