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、学习总结与回顾