一步一步运用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport（1）
日期：2014-05-17 浏览次数：21037 次
忙活了那么久，终于进入正题，Ext JS MVC开发。
开始前，先说说4.1.1的一点点变化。在4.1的时候，要先创建一个扩展于Ext.app.Application的类，然后用create创建它的实例来开始应用程序的。而在4.1.1，则可直接调用application方法开始执行应用程序，简化了。
调用application方法，其参数是一个配置对象，主要配置项有以下两个：
l name：用来定义应用程序的名称，在这里是SimpleCMS。
l appFolder：应用程序的路径，这里是scripts/app
l autoCreateViewport：默认值为false，在这里要设置为true，让它自动加载\Script\app\View目录下的Viewport.js文件。因为目录已经在Loader中配置好了，因而不用设置目录。
在VS2010中，打开首页Index.cshtml，在用户信息下加入以下代码：
Ext.onReady(function () {
if (Ext.BLANK_IMAGE_URL.substr(0, 4)!= "data") {
Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
}
Ext.application({
name:"SimpleCMS",
appFolder:"scripts/app",
autoCreateViewport:true
});
})
这样，应用程序就运行起来了，现在要创建Viewport.js。在解决方案资源管理器中，在\Script\app\View目录上单击右键添加一个名为Viewport.js的脚本文本。在文件中需要定义一个从Ext.container.Viewport派生的类，用来搭建应用程序的整体界面。本示例将构建一个类似于Ext JS API的用户界面，分顶部、主区域、底部三部分。顶部主要是显示系统名称和退出等按钮，主区域使用标签页来显示管理的内容，而文章内容的详细信息页也会已标签页形式显示。底部纯粹是占位区，可以写一些状态信息等，但是在本示例就不做了，有兴趣自己研究一下。
目标明确后，先下好新类的定义框架，代码如下：
Ext.define('SimpleCMS.view.Viewport',{
extend: 'Ext.container.Viewport',
initComponent: function () {
varme=this;
me.callParent(arguments);
}
});
代码中，一定要注意类名，类名中最后一个小数点之前的内容为目录，之后的是文件名。在这里因为SimpleCMS指向的目录是scripts/app，因而文件所在目录是scripts/app/view，正是当前文件所在目录。
现在考虑一下使用什么布局，因为是垂直划分的三部分，因而不需要使用到Border布局了，使用VBox就可以了，现在加入布局：
layout: { type: 'vbox', align: 'stretch' },
<
