一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport（2）

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

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

要在Viewport内为各标签页添加activate事件，就不太符合MVC要求了。是的，这个在顶部实现退出按钮的时候已经违反要求了。因而都需要做出修改。不过，笔者也曾思前想后的考虑过，开发应用程序，是否就要这么刻板呢？尤其是像退出这样简单的操作，而且对于Javascript这样灵活的语言。这个，如果探讨起来，就和语言之争一样没什么意义了，大家还是根据自己习惯，灵活掌握吧。

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

Ext.define('SimpleCMS.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"}

];

varroles = "." + SimpleCMS.Userinfo.Roles.join('.') + ".";

if(roles.indexOf(".系统管理员.") >= 0) {

me.items.push({ title: "用户管理",id:"userPanel"});

}

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

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

Ext.define('SimpleCMS.controller.MainPanel',{

extend: 'Ext.app.Controller',

init: function () {

}

});

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

this.control({

'#contentPanel': {

activate: {

single: true,

fn : function (panel) {

console.log(panel);

}

}

},

'#picPanel': {

activate: {

single: true,

fn: function (panel) {

console.log(panel);

}

}

},

'#userPanel': {

activate: {

single: true,

fn: function (panel) {

console.log(panel);

}

}

}

}

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

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

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

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

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

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

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

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

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

controllers:["MainPanel"]

这样，就可自动加载主面板的控制器了。

现在，在浏览器中打开首页，使用test用户登录，会看到界面和之前看到的没有区别。如果打开了Firebug，会看到以下显示：

[试用版]Ext.panel.Panel { id="contentPanel", title="文章管理"}

这说明activate事件已被触发了，不相信？可以在activate事件内添加别的东西来做个验证。

单击一下图片管理，会看到Firebug里又多了以下信息：

[试用版]Ext.panel.Panel { id="picPanel", title="图片管理"}

说明图片管理面板的activate也被触发了。

现在再切换回文章管理，会发现不再有提示信息了，原因就是activate事件设置了配置项single为true，它只会执行一次。

好了，Viewport到此就已经完成了。现在的重点是如何在主面板控制器内控制内容的加载了。

源代码下载地址：http://download.csdn.net/detail/tianxiaode/4590190