现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的（deferredRender值默认为true），但是它会预加载所有的类， 因而当类文件很多的时候，加载时间就是一大问题了。这个，也可通过SDK打包的方式解决，不过在设计阶段还是要考虑的。另一种好的解决方法是，只使用标签 页的标签，而不使用其主体加载内容，另外使用一个容器，内部使用CardLayout作为布局，类似书中最后一章的示例实现面板内容的加载和切换。
创新互联公司是一家从事企业网站建设、成都网站建设、网站建设、行业门户网站建设、网页设计制作的专业网站建设公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点近1000家。
在 这里，将展示另一种方式，就是在标签页激活时才去加载内容页。因而，这需要监听标签页的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