.png)
?
Extjs作為(wei)一款優秀的(de)(de)JS前(qian)端(duan)開(kai)發框架以其良好的(de)(de)架構、豐富的(de)(de)UI組件(jian)庫、完善的(de)(de)文(wen)檔和社區支(zhi)持等諸多(duo)優點擁有廣泛(fan)的(de)(de)市(shi)場(chang)應用(yong)空(kong)間，開(kai)發人員無需(xu)過多(duo)的(de)(de)關注HTML、CSS甚至各種常(chang)用(yong)JS算(suan)法，只需(xu)把精力(li)放在業務(wu)邏輯上(shang)，利用(yong)各種組件(jian)的(de)(de)相互組合調用(yong)便可(ke)輕(qing)松(song)而高效的(de)(de)開(kai)發出系統的(de)(de)前(qian)端(duan)頁面。
?
Extjs5在(zai)之(zhi)前版本的基礎上又推(tui)出了一系(xi)列實用(yong)而強大的功能(neng)，諸(zhu)如：MVVM架構，路由器，雙向數據(ju)綁定，平板支持(chi)(chi)，使Extjs的開(kai)發(fa)更(geng)加便捷，產品的用(yong)戶(hu)體驗更(geng)好(hao)！并且(qie)Extjs仍在(zai)持(chi)(chi)續(xu)更(geng)新中。
?
目(mu)前(qian)市面上還(huan)沒有詳細講(jiang)解Extjs5新特性(xing)及其實(shi)戰應用的(de)教(jiao)程(cheng)。講(jiang)師通過實(shi)際(ji)的(de)開(kai)發(fa)案例(li)，將Extjs的(de)基礎知(zhi)識(shi)和Extjs5的(de)新特性(xing)融匯(hui)貫通，詳細的(de)講(jiang)解了用Extjs5（MVVM+MVC并(bing)用）開(kai)發(fa)應用的(de)步驟(zou)、方(fang)法和技(ji)巧！同時采用Java做為后(hou)端開(kai)發(fa)語(yu)言，詳細講(jiang)解了如何(he)整合spring，spring mvc, mybatis等常用第(di)三方(fang)框架，實(shi)現數據的(de)前(qian)后(hou)端打通。
?
.jpg)
?
1.課程研發環境
開發(fa)工具:eclipse，sencha cmd；
數(shu)據庫工具:mysql5，mysql workbench，navicat premium；
其他工具:JsonView；
?
2.內容簡介
本教程(cheng)從Extjs5的開(kai)(kai)發環(huan)境搭建開(kai)(kai)始，講解(jie)了Extjs5的項目(mu)結構（包括(kuo)核(he)心文件的作用(yong)(yong)），Extjs類的一些基(ji)本概念(nian)，布局、事件、MVVM和(he)MVC架構、路由器，數據綁定等的概念(nian)和(he)實際使用(yong)(yong)，同時講解(jie)了開(kai)(kai)發中常用(yong)(yong)的extjs UI組件： panel, tabpanel,Tree, grid, form表(biao)單(dan)（及(ji)(ji)其驗證方(fang)法），數據組件： store，model等，講解(jie)了動態(tai)菜單(dan)、單(dan)表(biao)和(he)子父表(biao)模塊(kuai)等的開(kai)(kai)發方(fang)法以(yi)及(ji)(ji)后端spring,spring mvc,mybatis的整合(he)和(he)數據打(da)通等。授人以(yi)魚不如(ru)授人以(yi)漁，課程(cheng)重在(zai)培養學(xue)員快(kuai)速學(xue)習快(kuai)速開(kai)(kai)發以(yi)及(ji)(ji)分析和(he)解(jie)決問題的能力！
.png)
?
1、 Extjs5概述及預期(qi)學習效果(guo)
2、 Extjs5工程(cheng)目錄結(jie)構和(he)核心(xin)文件分析
3、 信息管理系統通(tong)用(yong)功能歸(gui)納 - 電商企業(ye)支撐(cheng)系統演示
4、 信(xin)息(xi)管理系統通用功能(neng)歸納 - 通用功能(neng)提(ti)煉(lian)
5、 前端開(kai)發(fa) - 環境搭建
6、 前(qian)端開發 - 改變(bian)默認風格,初試數據綁定
7、 前端(duan)開發 - 理解Extjs類1（類定義，實例化，單例）
8、 前端開發 - 理(li)解Extjs類2（類繼(ji)承(cheng)：單繼(ji)承(cheng)、多(duo)繼(ji)承(cheng)和覆蓋）
9、 前端開發 - 理解Extjs類(lei)3（靜態屬性和方(fang)法： 可繼(ji)承(cheng)的、不可繼(ji)承(cheng)的）
10、前端開發(fa) - 理(li)解(jie)Extjs類4（類引用，自動(dong)getter和setter）
11、前(qian)端開發 - 理解Extjs類5（xtype,alias,alternateClassName）
12、前端(duan)開發 - 理解(jie)Extjs類6（模板(ban)方法，事件，自(zi)定義事件）
13、前(qian)端開(kai)發 - 理(li)解Extjs類7（命名(ming)規范）
14、前端開發 - 主(zhu)頁面(mian) - 總體布局(ju) （常用頁面(mian)布局(ju)方(fang)式...）1 （absolute， accordion）
15、前端開發 - 主頁面(mian) - 總體布局(ju) （常用頁面(mian)布局(ju)方(fang)式...）2 （border）
16、前(qian)端(duan)開(kai)發(fa) - 主頁面 - 總體(ti)布(bu)局 （常用頁面布(bu)局方式...）3 （card）
17、前端開發(fa) - 主頁面(mian) - 總體布局 （常(chang)用頁面(mian)布局方式(shi)...）4 （column）
18、前(qian)端開發 - 主(zhu)頁面 - 總體布(bu)局 （常用頁面布(bu)局方式...）5 （hbox,vbox）
19、前端開(kai)發 - 主頁(ye)(ye)面(mian) - 總體布局(ju)(ju) （常用頁(ye)(ye)面(mian)布局(ju)(ju)方式...）6 （其他布局(ju)(ju)方式）
20、前端開發 - 主頁(ye)面 - 構建頂欄 （實現一(yi)： 利用 container，component，menu） 1
21、前端開發 - 主頁面 - 構建頂欄 （實(shi)現一： 利用 container，component，menu） 2
22、前端開發 - 主頁面(mian) - 構建(jian)頂欄 （實現一： 利用 container，component，menu） 3
23、前(qian)端開發 - 主頁面 - 構建頂(ding)欄(lan) （實(shi)現一： 利(li)用 container，component，menu） 4
24、前端(duan)開(kai)發 - 主頁(ye)面 - 構建頂(ding)欄(lan) （實現二： 利用 toolbar）
25、前端開發 - 主(zhu)頁(ye)面(mian) - 構建(jian)導航菜單 ( panel + treepanel 基于配置可管理(li)的菜單 ) ?1
26、前端開(kai)發(fa) - 主(zhu)頁面 - 構建(jian)導航菜單 ( panel + treepanel 基于(yu)配置可管理的菜單 ) ?2
27、前(qian)端開(kai)發(fa) - 主頁面 - 構建導航菜單 ( panel + treepanel 基于配置可管理的(de)菜單 ) ?3
28、前(qian)端(duan)開(kai)發 - 主頁面 - 模塊開(kai)發架(jia)構 1（利用(yong)treepanel事(shi)件 和 panel 動態載(zai)入） 1
29、前端開(kai)發(fa) - 主頁面 - 模塊(kuai)開(kai)發(fa)架構 1（利用(yong)treepanel事件 和 panel 動態(tai)載入(ru)） 2
30、前端開發 - 主頁面 - 模塊開發架構 1（利用(yong)treepanel事件(jian) 和(he) panel 動態(tai)載(zai)入） 3
31、前端開發(fa) - 主頁面 - 模塊(kuai)開發(fa)架構(gou) 2（利用 extjs 反射機制 化繁為(wei)簡）
32、前端(duan)開(kai)發 - 主頁面 - 模塊開(kai)發架構(gou) 3（利用 全(quan)局控制器）
33、前(qian)端開發(fa)(fa) - 主頁面(mian) - 模(mo)塊開發(fa)(fa)架(jia)構 4（利用 路(lu)由器） 1
34、前端開(kai)發(fa) - 主頁面 - 模(mo)塊開(kai)發(fa)架構 4（利用 路由器） 2
35、前端開發(fa) - 主頁面(mian) - 模塊開發(fa)架構 4（利用 路由器(qi)） 3
36、前端開(kai)發 - 主頁面 - 模塊(kuai)開(kai)發架(jia)構 5（利(li)用 tabpanel）1
37、前(qian)端開發(fa) - 主頁面(mian) - 模塊開發(fa)架構 5（利用 tabpanel）2
38、前端開(kai)發 - 主頁面(mian) - 模(mo)塊開(kai)發架構 5（利用 tabpanel）3
39、前端開發 - Extjs 組件查找(zhao) 1（利用 ComponentQuery ?- ?基(ji)礎(chu)查找(zhao)）1
40、前端開發 - Extjs 組件查(cha)找 1（利用 ComponentQuery ?- ?基礎查(cha)找）2
41、前端開發 - Extjs 組件查(cha)(cha)找(zhao) 2（ComponentQuery ?- ?屬(shu)性查(cha)(cha)找(zhao)和偽類） 1
42、前端(duan)開發 - Extjs 組件(jian)查找 2（ComponentQuery ?- ?屬性查找和偽類(lei)） 2
43、前端開發 - Extjs 組件查找 3（其他查找方式）
44、后(hou)端開發 - 后(hou)端技術選型和工具安裝 (springmvc+mybatis + mysql+mysql workbench+ Navicat Premium）
45、后(hou)端開發(fa) - 后(hou)端項(xiang)目(mu)配置(zhi)(springmvc和mybatis整(zheng)合，項(xiang)目(mu)包結(jie)構安排) ?1
46、后端開發 - 后端項目配置(zhi)(springmvc和mybatis整合，項目包結構安排) ?2
47、后端(duan)開發 - 后端(duan)項目配置(zhi)(springmvc和mybatis整合，項目包結(jie)構安排) ?3
48、后端開(kai)發(fa) - 后端項(xiang)目配置(springmvc和mybatis整(zheng)合，項(xiang)目包結構安排) ?4
49、后端(duan)開發 - 后端(duan)項(xiang)(xiang)目(mu)配置(zhi)(springmvc和mybatis整合，項(xiang)(xiang)目(mu)包結構安排) ?5
50、后端(duan)開發- ?單(dan)表模塊 - 數據建(jian)模(數據庫模型設計,建(jian)庫建(jian)表,前端(duan)model) ?1
51、后端開發- ?單(dan)表模(mo)塊 - 數據(ju)建(jian)模(mo)(數據(ju)庫(ku)模(mo)型設計,建(jian)庫(ku)建(jian)表,前端model) ?2
52、整合(he)開發- ?單表(biao)模塊 - 創建列表(biao)頁面（利用gridpanel, store, 分頁顯示(shi),數據綁(bang)定，延遲載入） 1
53、整合開發- ?單(dan)表模塊 - 創建列(lie)表頁(ye)面（利用gridpanel, store, 分(fen)頁(ye)顯示,數(shu)據綁定，延遲載入） 2
54、整合開(kai)發- ?單(dan)表模(mo)塊 - 創建列表頁(ye)面（利用gridpanel, store, 分頁(ye)顯示,數據綁定，延遲載入） 3
55、整合開發- ?單表模(mo)塊 - 創建列表頁面（利用(yong)gridpanel, store, 分頁顯示,數據(ju)綁(bang)定，延遲載入） 4
56、整合開發- ?單(dan)表模塊 - 創(chuang)建新增（修改）頁面（利用Ext.data.Session，Ext.data.Batch， 表單(dan) , 數據綁定） 1
57、整合開發- ?單表模塊 - 創(chuang)建新(xin)增（修改）頁(ye)面（利用Ext.data.Session，Ext.data.Batch， 表單 , 數據綁定） 2
58、整合開發- ?單(dan)表模(mo)塊 - 創建新增(zeng)（修(xiu)改）頁面（利用(yong)Ext.data.Session，Ext.data.Batch， 表單(dan) , 數(shu)據綁(bang)定） 3
59、整合開發(fa)- ?單表模塊 - 編寫后端主體(controller, service, dao) ?1
60、整(zheng)合開發(fa)- ?單表模塊 - 編寫后端主體(controller, service, dao) ?2
61、整合(he)開發- ?單表模塊 - 編寫后(hou)端主體(ti)(controller, service, dao) ?3
62、整合開發- ?單表模塊 - 編寫后端主體(ti)(controller, service, dao) ?4
63、整合(he)開發- ?單(dan)表(biao)模塊(kuai) - 遠程過濾和排序(xu) ?1
64、整(zheng)合開發- ?單表(biao)模塊 - 遠程過濾和排序(xu) ?2
65、整合(he)開發- ?單表模塊(kuai) - 遠程過濾和排序 ?3
66、整(zheng)合開發 - ?單表模塊 - 輸入(ru)驗證(zheng)(正則(ze),vtype,validators,自定(ding)義(yi)field ) ?1
67、整(zheng)合開發(fa) - ?單表模塊 - 輸入驗證(正則(ze),vtype,validators,自定義(yi)field ) ?2
68、整合開(kai)發 - ?單表模塊 - 輸入驗證(zheng)(正(zheng)則,vtype,validators,自定義field ) ?3
69、整合開發(fa)- ?子父表模塊 - (數據建(jian)模型建(jian)庫建(jian)表,后(hou)端(duan)各(ge)層的編(bian)寫(xie))?
70、整合開發(fa)- ?子父表(biao)模(mo)塊(kuai) - (前端頁(ye)面編(bian)寫，利(li)用模(mo)型關聯,利(li)用override覆蓋官方模(mo)塊(kuai)方法,表(biao)格(ge)編(bian)輯(ji)插件(jian)) 1
71、整合開(kai)發(fa)- ?子父表模(mo)塊(kuai) - (前端頁面編(bian)寫，利(li)用(yong)(yong)模(mo)型關聯,利(li)用(yong)(yong)override覆蓋官方模(mo)塊(kuai)方法(fa),表格編(bian)輯插(cha)件) 2
72、整(zheng)合開發(fa)- ?子父表(biao)模塊 - (前端頁面(mian)編(bian)寫，利(li)用模型關(guan)聯,利(li)用override覆蓋官方模塊方法,表(biao)格編(bian)輯插件(jian)) 3
73、整合開(kai)發 - ?動態菜單 - （利用ext.Ajax 從(cong)服務(wu)器獲取菜單數據動態組裝）
74、學習總結與(yu)回顧
?
.png)
?
.jpg)
?
.jpg)
?
.jpg)
?
.png)
.jpg)
.png)
.png)
.jpg)
.jpg)
.jpg)
合作伙伴與授權機構
