ExtJs八(ExtJs Mvc创建ViewPort续)

前言

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的（deferredRender值默认为true），但是它会预加载所有的类，因而当类文件很多的时候，加载时间就是一大问题了。这个，也可通过SDK打包的方式解决，不过在设计阶段还是要考虑的。另一种好的解决方法是，只使用标签页的标签，而不使用其主体加载内容，另外使用一个容器，内部使用CardLayout作为布局.

在这里，将展示另一种方式，就是在标签页激活时才去加载内容页。因而，这需要监听标签页的activate事件。这样，问题又来了，是在标签页面板监听activate事件，还是在每个独立的标签页内监听activate事件。如果是在标签页面板内监听，就要判断当前标签页的哪一个，是否需要加载内容，因为文章的详细信息页也是标签页，因而这些都需要做判断。因为虽然写法简化了，但是要做的判断实在太多，不算太好的方法。而在具体标签页内监听，则不需要任何判断，而且可以设置事件为一次性性事件，也就是在监听时设置事件的single配置项为true，这样监听事件在执行一次后就会自动删除，不再监听了。

要在Viewport内为各标签页添加activate事件，就不太符合MVC要求了。是的，这个在顶部实现退出按钮的时候已经违反要求了。因而都需要做出修改。

正题

 为了实现标签页的MVC化，先在view目录下创建一个名称为MainPanel.js的文件，在文件里定义一个扩展于标签面板的控件，基本代码如下：

Ext.define('ExtMVCOne.view.MainPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mainpanel',
    flex: 1,
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
    }
});

使用配置项alias来为组件定义一个别名非常有必要，不然在Viewport就不能使用xtype来创建组件了，在这里，别名是mainpanel。在initComponet方法内，将Viewport创建mainpanel实例的代码复制过来，并修改如下：

        me.items = [
            { title: "文章管理", id: "contentPanel" },
            { title: "图片管理", id: "picPanel" }
        ];

        var roles = '.' + ExtMVCOne.Userinfo.Roles.join('.') + '.';
        if (roles.indexOf('.系统管理员.') >= 0) {
            me.items.push({ title: "用户管理", id: "userPanel" });
        }

因为是在组件内，所以将标签页加到items里就行了。要注意，所有标签页都添加了id，其目的是为了方便在控制器中找到面板，当然，这个使用其它方式获取也行，只是这样的方式是最快最直接的。这个可根据项目具体情况再做决定。还要注意，添加用户管理标签页时，用的是数组的push方法，而不是面板的add方法了。

现在，在Controller目录创建一个名称为MainPanel.js的脚本文件，用来定义主面板的控制，基本定义代码如下：

Ext.define('ExtMVCOne.controller.MainPanel', {
    extend: 'Ext.app.Controller',
    init: function () {
    }
});

因为控制器里不需要引用组件，也不需要模型和Store，因而没有定义refs、store和model配置项，只是定义了init方法。在init方法内，需要使用控制器的control方法来获取主面板内的标签页，并为其添加activate事件，具体代码如下：

        this.control({
            '#contentPanel': {
                activate: {
                    single: false,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息",panel.title);
                    }
                }
            },
            '#picPanel': {
                activate: {
                    single: true,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息", panel.title);
                    }
                }
            },
            '#userPanel': {
                activate: {
                    single: true,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息", panel.title);
                    }
                }
            }
        });

代码中，对象中的关键字就是选择器，用来查找组件用的，在这里要使用id来查找，因而在组件id前面要添加“#”符号，表示使用id查找组件。在组件内，绑定了activate事件，事件中，single配置项说明该事件只执行一次，配置项fn则是事件的回调函数，目前只是简单的显示返回的面板对象。

在这里，没有使用权限添加用户面板的原因是，如果找不到组件，它不会做任何处理，因而不使用权限添加也没问题的，不像可视组件内，如果不限制，就会显示出来。在这里，一般都会担心，这会不会造成安全问题？被利用来实现无权限的操作，这个其实不用担心，就算它能看到显示的组件，但是我后台通过权限控制返回的数据，它没有权限，是看不到任何数据的，也不能对没权限的数据进行任何操作。

控制器定义好以后，切换会Viewport.js，先添加一个requires配置项，让其自动加载MainPanel，代码如下：

 

requires: ['ExtMVCOne.view.MainPanel'],

 

这句是必须的，不然会找不到组件。

然后将之前添加mainpanel的代码全部删除，在items内原来添加主面板的位置添加以下代码来添加主面板视图：

{xtype: "mainpanel", id: "mainPanel" },

在这里，也加了一个id，也是为了方便以后使用选择器查找组件。

因为要加载主面板的控制器，所以要在首页Index.cshtml使用application方法创建应用时添加controllers配置项，代码如下：

controllers:["MainPanel"]

现在，在浏览器中打开首页，使用test用户登录，会看到界面和之前看到的没有区别。

可以点击一下图片管理，那么会弹出图片管理的提示框，然后再点击文章管理，同样还是会出现文章管理的提示框。原因就是activate事件设置了配置项single为false，相反如果设置为true，那么它就会像图片管理一样只会执行一次。

 

示例代码下载链接https://files.cnblogs.com/aehyok/ExtJsViewPortTwo.zip