extjs-mvc结构实践(四):导航菜单与控制器模块联动

叁歲伎倆 2022-02-26 15:44 114阅读 0赞

> 前面几篇文档，我们基本实现了一个静态的extjs页面，本篇开始，实现左侧导航树与右侧内容的联动，也就是点击导航菜单，加载对应模块页面和业务逻辑，实现js文件的按需加载。

### 业务需求是这样的： ###

左侧的treelist，当点击某个节点的时候，系统根据tree数据里配置的模块信息，加载这个模块，并且把模块对应的主页面显示在中间区域的tabpanel里。

#### 改造主控制器:app/luter/controller/MainController.js ####

监听导航树的node点击事件，进行后续处理：

'navlist': {
        'itemclick'：function(el, record, opt){
            //可以通过如下方式获取点击节点的数据。
            var nodeData = record.node.data;
        
        }
    }

完整的代码如下:

Ext.define('luter.controller.MainController', {
 extend: 'Ext.app.Controller',
 views: ['main.ViewPort'],
 stores: ['NavTreeStore'],
 init: function (application) {
 var me = this;
 this.control({
 'viewport': {//监听viewport的初始化事件，可以做点其他事情在这里，如有必要，记得viewport定义里的alias么？
 'beforerender': function () {
 console.log('viewport begin render at:' + new Date());
 },
 'afterrender': function () {
 console.log('viewport render finished at:' + new Date());
 },
 },
 'syscontentpanel': {
 'afterrender': function (view) {
 console.log('syscontentpanel rendered at:' + new Date());
 }
 },
 'navlist': {
 'itemclick': function (el, record, opt) {
 var nodeData = record.node.data;//当前点击节点的数据
 
 var tabpanel = Ext.getCmp('systabpanel');//中间tabpanel
 var tabcount = tabpanel.items.getCount();//当前tabpanel已经打开几个tab了。
 var maxTabCount = 5;//最大打开的tab个数
 if (tabcount && tabcount > 5) {
 showFailMesg({
 title: '为了更好的使用，最多允许打开5个页面',
 msg: '您打开的页面过多，请关掉一些!'
 });
 return false;
 }
 if (nodeData.leaf) {//是打开新模块，否则是展开树节点
 var moduleID = nodeData.module_id;//找到控制器ID,定义在tree的数据里modole_id
 if (!moduleID || moduleID == '') {
 showFailMesg({
 title: '创建模块失败.',
 msg: '模块加载错误，模块id为空，创建模块失败'
 });
 return false;
 }
 console.log('to add module with id:' + moduleID);
 //开始加载控制器
 try {
 //尝试加载这个控制器，这个过程就是按需ajax加载js文件的过程。
 //如果这个模块被加载过，则不会重复加载。
 var module = luterapp.getController(moduleID);
 } catch (error) {
 showFailMesg({
 msg: '根据模块ID:' + moduleID + '创建模块失败。' +
 ' 可能的原因 : 1、该模块当前没有实现.' +
 ' 2、模块文件名称与模块名称不一致，请检查' +
 'Error: ' + error + ''
 });
 return false;
 } finally {
 
 }
 //判断模块是否加载下来，因为是ajax加载，所以还是判断一下比较好
 if (!module) {
 showFailMesg({
 msg: 'B:load module fail,the module object is null.' +
 ' maybe :the module is Not available now.'
 });
 return false;
 
 }
 //加载到之后，默认去获取控制器里views:[]数组里的第一个作为主视图
 var viewName = module.views[0];
 console.log('will create a tab with view ,id:' + viewName);
 var view = module.getView(viewName);
 console.log('get the view el:' + view);
 if (!view) {
 showFailMesg({
 msg: 'Sorry ,to get the module view fail...'
 });
 return false;
 }
 
 //判断一下这个视图是不是已经加载到tabpanel里去了
 var tabid = me.getTabId(moduleID);
 console.log('will create a tab with id:' + tabid);
 var notab = tabpanel.getComponent(tabid);
 var viewEL = view.create();
 if (!viewEL) {
 showFailMesg({
 msg: 'Sorry ,to get the module viewEL fail...'
 });
 return false;
 }
 
 if (!notab && null == notab) {//不存在新建
 //不管是啥，都放到一个panel里面。
 notab = tabpanel.add(Ext.create('Ext.panel.Panel', {
 tooltip: nodeData.text + ':' + nodeData.qtip,
 id: tabid, // tab的唯一id
 title: nodeData.text, // tab的标题
 layout: 'fit', // 填充布局,它不会让load进来的东西改变大小
 border: false, // 无边框
 closable: true, // 有关闭选项卡按钮
 iconCls: nodeData.iconCls,
 listeners: {
 // 侦听tab页被激活里触发的动作
 scope: this,
 destroy: function () {
 console.log("tab :" + tabid + ",has been destroyed")
 }
 },
 items: [view.create()]
 }));
 //新建之后focus
 tabpanel.setActiveTab(notab);
 }
 else {//如果这个tab已经存在了，则focus到这个tab
 tabpanel.setActiveTab(notab);
 }
 } else {
 //如果leaf =false,则说明这不是一个最底层节点，是目录，展开。
 console.log('tree node expand')
 }
 }
 }
 });
 },
 //这个方法从tab id里分离出控制器名称
 getTabId: function (mid) {
 var winid = mid;
 var c = winid.split('.');
 winid = c.pop();
 return winid + '-tab';
 }
 
 });

#### 左侧菜单树对应的测试数据：app/testdata/menu.json ####

*一般情况下，这个菜单数据是保存在后端的，通过权限判断加载用户可访问的资源形成树结构返回给前端使用。leaf标明了这是一个目录还是一个模块，module\_id对应的是控制器的路径。 比如下面这个测试数据中。 "leaf": true, "module\_id": "sys.UserController", 在app.js中，我们配置了appFolder:‘app/luter’, leaf标明了这是一个控制器模块，点击后会去触发控制器加载动作。 所以这个模块的实际路径(也就是js文件)就是:$\{appFolder\}/controller/$\{module\_id\}.js 即：app/luter/controller/sys.UserController.js*

[
      {
        "id": "111",
        "text": "系统管理",
        "href": null,
        "leaf": false,
        "iconCls": "fa fa-home",
        "module_id": "no sign",
        "qtip": "这个地方显示鼠标悬停提示",
        "children": [
          {
            "id": "11111",
            "text": "用户管理",
            "href": null,
            "leaf": true,
            "iconCls": "fa fa-user",
            "module_id": "sys.UserController",
            "qtip": "系统用户管理",
            "children": []
          }
        ]
      }
    
    ]

导航菜单与tabpanel 联动完成，下面弄个控制器实验一下效果，以新建一个系统管理分类下的用户管理模块功能为例：  
系统管理部分模块放在sys目录下，so:

*  控制器:app/luter/controller/sys/UserController.js
 *  模型：app/luter/model/UserModel.js
 *  Store:app/luter/store/UserStore.js
 *  视图主入口：app/luter/model/view/sys/user/User.js
 *  列表视图:app/luter/model/view/sys/user/UserList.js
 *  ......

### 用户管理控制器 :app/luter/controller/sys/UserController.js ###

Ext.define('luter.controller.sys.UserController', {
        extend: 'Ext.app.Controller',
        stores: ['UserStore'], //用户store
        views: ['sys.user.User'], //主view ，tab里会加载第一个视图。
        init: function () {
            this.control({
                'userlistview': {
                    'beforerender': function (view) {
                        console.log("beforerender   list......   ");
                    },
                    'afterrender': function (view) {
                        console.log("afterrender   list......   ");
                         // this.getUserStoreStore().load();//如果UserStore里没设置autoLoad: true,就可以在这里加载用户数据
                    }
                }
            });
    
        }
    });

### 用户模型Model：app/luter/model/UserModel.js ###

Ext.define('luter.model.UserModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'string'},
            {name: 'username', type: 'string'},
            {name: 'gender', type: 'string'},
            {name: 'real_name', type: 'string'}
        ]
    });

### 用户Store:app/luter/store/UserStore.js ###

Ext.define('luter.store.UserStore', {
        extend: 'Ext.data.Store',
        autoLoad: true,//自动加载数据
        model: 'luter.model.UserModel',//使用的模型
        pageSize: 15,//每页数据多少
        proxy: {
            type: 'ajax',//ajax获取数据
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'POST',
                destroy: 'POST'
            },
            api: {
                read: 'app/testdata/user.json'//从这个地方获取数据，当然，这里用测试数据
            },
            reader: {//返回数据解析器
                type: 'json',
                root: 'root',//用户列表数据在这个字段下
                successProperty: 'success',//成功与失败的标志位是这个字段
                totalProperty: 'total'//记录总数在这个字段
            },
            listeners: {
                exception: function (proxy, response, operation, eOpts) {
                    DealAjaxResponse(response);//监听ajax异常提示错误
                }
            }
        },
        remoteSort: true,//服务器端排序
        sortOnLoad: true,//加载就排序
        sorters: {//拿ID排序
            property: 'id',
            direction: 'DESC'
        }
    
    });

### 用户管理模块主视图：app/luter/model/view/sys/user/User.js ###

Ext.define('luter.view.sys.user.User', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.userview',
        layout: 'fit',
        requires: ['luter.view.sys.user.UserList'],//引入用户列表模块
        border: false,
        initComponent: function () {
            var me = this;
            me.items = [{
                xtype: 'userlistview',
                layout: 'fit'
    
            }]
            me.callParent(arguments);
        }
    });

### 用户列表视图:app/luter/model/view/sys/user/UserList.js ###

Ext.define('luter.view.sys.user.UserList', {
 extend: 'Ext.grid.Panel',
 alias: 'widget.userlistview',//其他地方就可以这么用:xtype:‘userlistview’
 requires: [],
 store: 'UserStore',//用到的store
 itemId: 'userGrid',//自己的itemid
 columnLines: true,//是否显示表格线
 viewConfig: {
 emptyText: '暂无数据'//store没数据的时候显示这个
 },
 initComponent: function () {
 var me = this;
 me.columns = [{
 xtype: 'rownumberer',
 text: '序号',
 width: 60
 }, {
 header: "操作",
 xtype: "actioncolumn",
 width: 60,
 sortable: false,
 items: [{
 text: "删除",
 iconCls: 'icon-delete',
 tooltip: "删除这条记录",
 handler: function (grid, rowIndex, colIndex) {
 var record = grid.getStore().getAt(rowIndex);
 if (!record) {
 toast({
 msg: '请选中一条要删除的记录'
 })
 } else {
 showConfirmMesg({
 message: '确定删除这条记录?',
 fn: function (btn) {
 if (btn === 'yes') {
 Ext.Ajax.request({
 url: 'sys/user/delete',
 method: 'POST',
 params: {
 id: record.get('id')
 },
 success: function (response, options) {
 DealAjaxResponse(response);
 Ext.data.StoreManager.lookup('User').load();
 },
 failure: function (response, options) {
 DealAjaxResponse(response);
 }
 });
 } else {
 return false;
 }
 }
 
 })
 
 }
 
 }
 }]
 }, {
 
 header: baseConfig.model.user.id,
 dataIndex: 'id',
 hidden: false,
 flex: 1
 },
 
 {
 header: baseConfig.model.user.username,
 dataIndex: 'username',
 flex: 1
 },
 {
 header: baseConfig.model.user.real_name,
 dataIndex: 'real_name',
 flex: 1
 }
 ]
 
 me.bbar = Ext.create('Ext.PagingToolbar', {
 store: me.store,
 displayInfo: true,
 displayMsg: '当前数据 {0} - {1} 总数： {2}',
 emptyMsg: "没数据显示",
 plugins: [new Ext.create('luter.ux.grid.PagingToolbarResizer', {
 options: [5, 10, 15, 20, 25, 50, 100]
 })]
 })
 me.dockedItems = [{
 xtype: 'toolbar',
 items: [{
 text: '添加',
 iconCls: baseConfig.appicon.add,
 tooltip: '添加',
 handler: function () {
 var win = Ext.create('luter.view.sys.user.UserAdd');
 win.loadView();
 win.show();
 
 }
 }]
 }]
 me.listeners = {
 'itemdblclick': function (table, record, html, row, event, opt) {
 if (record) {
 var id = record.get('id');
 var view = Ext.create('luter.view.sys.user.UserEdit', {title: '编辑数据'});
 view.loadView();
 loadFormDataFromDb(view, 'sys/user/view?id=' + id);
 } else {
 showFailMesg({
 msg: '加载信息失败，请确认。'
 })
 }
 
 }
 }
 me.plugins = []
 me.callParent(arguments);
 }
 });
 
 //这里的baseConfig定义在公共配置文件config.js中，如下：

### 公共配置参数定义文件:app/luter/config.js ###

别忘记在app.html中app.js之前引入这个文件。

/**
 * icon_prefix font字体前缀定义
 * baseConfig 全局配置
 */
 var icon_prefix = " fa blue-color ", baseConfig = {
 /**
 * 全局常量定义
 */
 cons: {
 noimage: 'app/resource/images/noimage.jpg',
 /**
 * 静态服务器的地址
 */
 static_server: ''
 },
 /**
 * 渲染器，对Boolean类型的表格列的显示内容进行渲染
 */
 renders: {
 trueText: '',
 falseText: '',
 cancel: ''
 },
 /**
 * 图标定义
 */
 appicon: {
 home: icon_prefix + 'fa-home',
 add: icon_prefix + "fa-plus",
 update: icon_prefix + "fa-edit",
 trash: icon_prefix + "fa-trash",
 delete: icon_prefix + "fa-remove red-color",
 set_wallpaper: icon_prefix + "fa-image",
 setting: icon_prefix + "fa-gears",
 desktop: icon_prefix + "fa-desktop",
 pailie: icon_prefix + "fa-cubes",
 logout: icon_prefix + "fa-power-off",
 avatar: icon_prefix + "fa-photo",
 key: icon_prefix + "fa-key",
 user: icon_prefix + "fa-user",
 refresh: icon_prefix + "fa-refresh blue-color",
 close: icon_prefix + "fa-close",
 male: icon_prefix + 'fa-male',
 female: icon_prefix + 'fa-female',
 role: icon_prefix + 'fa-users',
 user_add: icon_prefix + "fa-user-plus",
 undo: icon_prefix + 'fa-undo',
 search: icon_prefix + 'fa-search',
 reset: icon_prefix + 'fa-retweet',
 yes: icon_prefix + 'fa-check green-color',
 no: icon_prefix + 'fa-close red-color',
 list_ol: icon_prefix + ' fa-list-ol',
 list_alt: icon_prefix + ' fa-list-alt',
 ban: icon_prefix + "fa-ban",
 log: icon_prefix + "fa-tty",
 printer: icon_prefix + "fa-print",
 fax: icon_prefix + "fa-fax",
 download: icon_prefix + "fa-cloud-download",
 upload: icon_prefix + "fa-cloud-upload",
 comment: icon_prefix + " fa-commenting-o",
 credit: icon_prefix + "fa fa-gift"
 },
 /**
 * 模型定义
 */
 model: {
 /**
 * 系统用户模型
 */
 user: {
 id: 'ID',
 username: '用户名',
 real_name: '真实姓名'
 }
 }
 };

最后，附上用户列表的测试数据（当然，瞎编的......）：app/testdata/user.json

{
      "total": 33,
      "root": [
        {
          "id": "aaa",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "ccc",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "ddd",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "eee",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        },
        {
          "id": "fff",
          "username": "user",
          "real_name": "用户"
        }
      ],
      "success": true
    }

如上，没问题的话，刷新页面，应该能看到如下所示：

![图片描述][1514023035-5a65ed89818b9_articlex]

上图中，一些Extjs默认的样式经过了hack。不是默认样式。  
最终，整个项目的目录结构如下：  
![图片描述][139575371-5a65f398057ec_articlex]

### 判断是不是动态按需加载? ###

1、打开chrome的开发控制台，切换到network面板的js下。  
2、刷新页面  
3、重复点击左侧用户管理，查看JS加载情况。正常情况下同一个模块的js只加载一次。

[1514023035-5a65ed89818b9_articlex]: /images/20220226/22cdafd9bce040b69b55ec5a3aab8a07.png
[139575371-5a65f398057ec_articlex]: /images/20220226/347413a2bb7d454bb0d654d644c497f2.png