Extjs框架前端开发培训合编.pptx

1 Extjs框架前端开发培训 2015年11月2日 Gavin 2 前端基类介绍 前端框架整体介绍 1 2 注意事项及建议 3 沟通与讨论 4 3 前端框架整体介绍 技术框架： ExtJs 5.1 版本， MVVM 技术 框架结构： Common-web 所有子应用通用的前端资源 app 基类源码 belle-ux 开发的通用控件及通用函数 ext-ux 需要引用的第三方插件 static 中包括 字体图标，Extjs框架 ，通用图片及css样 式文件等。 uc-web 为主框架入口，包括集成管理 。 应用中的目录结构, model, store, controller, view 每个模块应由4个文件组成： model view viewController viewModel 4 前端基类介绍 前端框架整体介绍 1 2 注意事项及建议 3 沟通与讨论 4 5 前端基类介绍 BasePage 基础基类 SimplePage 单表基类 MultiPage 多表基类 基类的继承关系 BillList 单据清单基类 BillDetail 单据明细基类 单据基类 6 前端基类介绍 BasePage基类功能点： 1. 权限控制 通用方法封装 统一调用后端接口处理 7 前端基类介绍 SimplePage基类功能点： 1. 定义通用工具条 定义通用查询面板 定义通用网格mastergrid 定义通用编辑面板 实现工具条中按钮事件 控制网格的常用事件 8 前端基类介绍 MultiPage基类功能点： 1. 定义 grid1~grid9 控件 控制9个网格的常用事件 实现主从表（包括一主多从）的批量处理。 实现多表（没有主从关系）的显示 9 前端基类介绍 BillListPage基类功能点： 1. 实现跳转到明细 BillDetailPage基类功能点： 1. 定义单据工具条 2. 定义单据面板 3. 定义单据状态条 4. 实现单据功能 按钮的事件 10 前端基类介绍 前端框架整体介绍 1 2 注意事项及建议 3 沟通与讨论 4 11 注意事项及建议 1. 仔细检查代码，在本地测试成功后再提交到仓库 2. 做好代码格式化 3. 逗号和分号的用法 4. 不要给对象添加无用的属性 5. 自定义布局 6. 按基类的设计方式去实现模块的开发，不要去更改基类 中对象的定义，如有特殊的需求，请提出来，调整基类。 7. 基类的源码都是可以看到的，多花时间去了解才能 更好 的使用 8. 学会使用 API, 80% 的功能都能实现 12 Thanks! 沟通与讨论