Sencha Modern

Sencha Modern 

前言

        经过一个月捣鼓，基于sencha公司最新框架版本 ExtJS7.0 modern 的示例代码可以和大家见面了。示例中对系统主题、公共（组件，方法）封装、模块示例，开发规范，做了大量的编写，期间借鉴了一些其它UI框架的风格，也吸取了一些其它框架中对日常开发业务代码的封装，经过不断的融合，完善，踩坑，改进，现推出已经做好的示例，希望借此拉近开发人员与原生框架的距离，避免一些弯路，浪费不必要的宝贵时间。

1. 演示地址 https://jpengsong.github.io/modern-pc/
2. 源码地址 https://github.com/jpengsong/sencha-modern-pc.git
3. 官网示例 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

                   　　}

                    }