Sencha Modern
前言
经过一个月捣鼓,基于sencha公司最新框架版本 ExtJS7.0 modern 的示例代码可以和大家见面了。示例中对系统主题、公共(组件,方法)封装、模块示例,开发规范,做了大量的编写,期间借鉴了一些其它UI框架的风格,也吸取了一些其它框架中对日常开发业务代码的封装,经过不断的融合,完善,踩坑,改进,现推出已经做好的示例,希望借此拉近开发人员与原生框架的距离,避免一些弯路,浪费不必要的宝贵时间。
- 演示地址 https://jpengsong.github.io/modern-pc/
- 源码地址 https://github.com/jpengsong/sencha-modern-pc.git
- 官网示例 http://49.232.143.24:8000/kitchensink
系统主题
支持主题配色和导航菜单切换
公共(组件,方法)封装
1:app/ux/comboxTree
/**
* 下拉树 使用例子如下(支持模糊搜索)
* {
* xtype: "comboxtree",
* label: 'fieldText',
* name: "name",
* displayField: "text",
* valueField: "value",
* width: "100%",
* height: 200,
* rootVisible: false,
* bind: {
* value: "{value}",
* store: "{store}"
* }
* }
*/
2:app/ux/chart/EChart.js
/**
* 百度图表Echart使用例子如下
* @param {Object} echart.setOption(option)
* {
* xtype: "echart",
* title: "访问量",
* reference: "echart",
* height: 400
* }
*/
3:app/ux/page/Dialog.js
/**
* 视图 弹窗基础类 使用例子适用于
* 登录页,锁定页面,空白页,404页面,500页面 ...
*/
4:app/ux/page/Page.js
/**
* 视图 页面基础类 使用例子范围适用于
* 条件查询和Grid列表展示
*/
5:app/ux/page/TreePage.js
/**
* 视图 页面基础类 使用例子范围适用于
* 左侧树和右侧Grid列表展示
*/
6:app/ux/plugin/Pagination.js
/**
* 分页插件 使用例子如下
* plugins: {
* pagination:{
* displayInfo:false
* }
* }
*/
7:app/ux/plugin/RequestData.js
/**
*
* 绑定组件数据存在延迟,而不能立即调用,此插件用来初始化组件请求参数
* 分页请求参数 采用统一格式如下
* var RequestData = {
* TokenGuid:用户身份票据,
* Data:{
* QueryItem:Object或者Array,
* PagingSetting:{
* PageCount:10,
* PageIndex:0,
* SortBy:"ASC"
* SortOrder:"field"
* }
* }
* }
* OR
* var RequestData = {
* TokenGuid:用户身份票据,
* Data:{Object或者Array}
* }
* 使用例子如下:
* plugins: {
* requestdata: {
* autoLoad: true
* }
* }
*/
8:app/ux/proxy/API.js
/**
*
* Store通过Proxy请求本地模拟数据 使用例子如下:
* proxy: {
* type: 'api',
* reader: {
* type:"jsonreader",
* datatype:config.DataType.GridStore
* },
* url: '/api/SystemManage/SysUser/GetSysUserPage',
* }
*
*/
9:app/ux/proxy/Server.js
/**
*
* Store通过Proxy请求远程模拟数据 使用例子如下:
* proxy: {
* type: 'server',
* reader: {
* type:"jsonreader",
* datatype:config.DataType.GridStore
* },
* url: '/api/SystemManage/SysUser/GetSysUserPage',
* }
*
*/
10:app/ux/reader/JsonReader.js
/**
* proxy请求(本地/远程)json数据,返回来做统一处理:
* 默认和(本地/远程)所有请求交互,按照统一往返标准格式交互,返回数据格式如下
* ResponseData:{
* Data: {}, 返回数据
* Success: true,是否正确返回
* Message: "",系统消息
* Code: "",系统格式编码 例:Public.I_0001(执行成功),Public.E_0001(公共错误),Public.E_0002(用户缺少某个权限)...
* }
*
*/
11:app/ux/tree/Ztree.js
/**
* Ztree 使用例子如下:
* {
* xtype:"ztree",
* valueField:"id",
* displayField:"name",
* parentField:"parebtId"
* }
*/
12:app/ux/upload/FileUploader.js
/**
* 百度WebUploader上传文件, 批量文件上传使用例子如下:
* {
* xtype: "fileuploader",
* inline :true,
* title:"批量上传",
* reference: "fileUploader",
* cls: 'col-sm-10 col-xs-20',
* height: 500,
* listeners:{
* painted:function () {
* var me = this;
* me.setOption({
* server: "/api/File/Upload"
* });
* }
* }
* }
*/
13:app/ux/utilty/Ajax.js
/**
* 发起Ajax.request请求
* @param {Object} option 包含下列属性的对象
* @param {Object} option.data 传给后台的参数
* @param {Object} option.baseUrl 提交至后台的url地址,缺省为``
* @param {String} option.url 提交至后台的url接口
* @param {String} option.method 提交方法,缺省为`POST`
* @param {String} option.type 返回类型,缺省为`JSON`
* @param {String} option.params 提交的其他参数
* @param {Function} option.success 提交成功后执行的函数
* @param {Function} option.error 提交失败后执行的函数
* @param {Boolean} option.async 是否异步提交数据,缺省为`true`
* @param {Number} option.timeout 请求延时,毫秒,缺省为`30000`
* @param {Object} option.scope 作用域,缺省为`this`
* @param {Boolean} option.nosim 参数设置 false 请求本地接口,true 请求远程接口 缺省为true
* @param {Boolean} option.showmask 参数设置true显示遮罩
* @param {String} option.maskmsg 遮罩显示消息 缺省为 '正在请求数据...'
* 前后端交互采用统一格式处理,使用例子如下:
* App.Ajax.request({
* url: "/api/SystemManage/SysUser/AddSysUser""),
* method: "POST"),
* nosim: false,
* type: "JSON",
* showmask: true,
* maskmsg: "正在保存...",
* params: user.getData(),
* success: function (response) {
*
* },
* error: function (msg) {
*
* }
* })
*/
14:app/ux/utilty/Config.js
/**
*
* 全局配置类
*
*/
15:app/ux/utilty/Cookie.js
/**
* 操作Cookie的工具类。需要处理cookie时,使用此类的SetCookie和GetCookie方法来设置和获取cookie值。
* 例子如下:
* @example
* App.Cookie.SetCookie('username', 'abc');//设置cookie
* var name = App.Cookie.GetCookie('username');//获取cookie值
*/
16:app/ux/utilty/Privilege.js
/**
* 控制组件是否具有权限
*
* {
* text: ResManager.getControlString("Public.Add"),
* hidden: App.Privilege.isHide("CodeTable_New"),
* scope: this
* }
*
* 例子中是一个按钮控件,对应一个操作权限`CodeTable_New`,在hidden配置里调用本函数。
* 如果当前用户不具有此权限,按钮会隐藏。
* @param {String} bizCode 控件对应的业务代码
* @return {Boolean} 当不具有该业务代码的权限时,返回`false`
* @static
*/
17:app/ux/utilty/ResponseCode.js
/**
* 操作ResponseCode的工具类
* 本地/远程 返回ResponseData的Code枚举
* ResponseData = {
* Data:object,
* Success:true,
* Message:null,
* Code:枚举
* }
*/
18:app/ux/utilty/SimulateDB.js
/**
* 本地模拟数据数据库,用于多个本地数据源联合查询
*/
19:app/ux/utilty/TreeNode.js
/**
* 格式化树节点数据 用于第三方树插件和TreeSotre
*/
20:app/ux/utilty/UserInfo.js
/**
* 处理用户信息的工具类
*/
21:app/data/Simulated.js
/**
* 请求模拟数据的基础操作类
*
* 功能包括 (获取请求数据源,分页查询,操作树节点数据)
*
*/
22:overrides/field/PasswordField.js
/**
* 重写密码框组件,支持密码显隐
*/
23:overrides/loadmask/LoadMask.js
/**
* @overrides 遮罩层组件,需要样式配合
*/
24:overrides/selection/Row.js
/**
* @overrides 列表在有分页情况下,修复在全选后不能取消全选
*/
25:overrides/simlet/JsonSimlet.js
/**
* @overrides 返回前台模拟数据
* var responseData = {
* Data: {},
* Success: true,
* Message: "",
* Code: "Public.I_0001"
* }
*/
模块示例
1:用户管理
Ext.define("App.view.systemmanage.sysuser.SysUser", {
extend: "App.ux.page.Page",
xtype: "sysuser",
viewModel: "sysuser",
controller: "sysuser",
initialize: function () {...
},
initQueryPanel: function () {...
},
initGridPanel: function () {...
},
})
2:组织机构
Ext.define("App.view.systemmanage.sysorg.SysOrg", {
extend: "App.ux.page.TreePage",
xtype: "sysorg",
viewModel: "sysorg",
controller: "sysorg",
initialize: function () {...
},
initTreePanel:function(){...
},
initQueryPanel:function(){...
},
initGridPanel:function(){...
}
})
3:菜单管理
Ext.define("App.view.systemmanage.sysmenu.SysMenu", {
xtype: "sysmenu",
viewModel: "sysmenu",
controller: "sysmenu",
extend: "App.ux.page.TreePage",
initialize:function(){...
},
initTreeGridPanel:function(){...
}
})
开发规范
1:类命名规范
Ext.define('App.view.systemmanage.sysuser.SysUser'>, //所有类的首单词和末尾单词采用大写其余小写{
extend: 'App.ux.page.Page',
xtype: 'sysuser', //所有类的别名(alias或xtype采用小写,名称过长可以用 '_' 划分 例:sys_user )
name:'xxx' //类的属性采用全小写,严禁大写 例:Name
});
2:代码规范
//事件方法的方法名开头以 on 开头 注意小写
//每个方法之间空出一行间距
//非公共或特殊需求说明方法体禁止注释滥用 适用所有地方
//严禁无用代码出现方法中保持代码简洁 适用所有地方
Ext.define('App.view.systemmanage.sysuser.SysUserController', {
extend: 'Ext.app.ViewController'
alias: 'controller.sysuser'
//新增
onAdd: function () {...}
//修改
onEdit: function () {...}
//删除
onDel: function () {...}
})
3:查找组件
//非全局定义id和防止id冲突以及整体规范约束,开发中不建议在组件上定义id,查找组件可以使用以下几项方法
1:使用 reference:'xxx' 在controller中获取
2:donw()或up()
3:使用Ext.ComponentQuery查找
4:业务目录层级
//建议按照业务来划分项目文件夹
App
view
systemmanager
sysrole
SysRole.js
SysController.js
SysModel.js
5:新的框架
//建议抛弃6之前版本和传统开发模式,采用前后端分离,遵循官方给的结构方案
App
data
model
store
ux
view
Application.js
Application.scss
ext
overrides
resources
sass
app.js
app.json
bootstrap.css
bootstrap.js
bootstrap.json
bootstrap.jsonp
build.xml
index.html
workspace.json
6:css命名规范
所有编写css最终是以全局引用而并非局部引用,为防止css命名冲突 若非定义全局css命名,建议css命名按照业务划分命名 例:
1:给登录页定义样式 .authentication-login
2:给用户管理页定义样式 .systemmanage-sysuser
子样式不要全局裸露 应定义在父容器里面, 例
.authentication-login {
.authentication-xxx{
padding:xxx
}
}
Q群:851794664