从零开始学习Sencha Touch MVC应用之四

现在准备测试！

在基于webkit的浏览器中，打开index.html文件，你将看到信息框的显示。

创建视图：

我们的视图可以用扩展Sencha Touch组件的方式来创建，它们负责数据的渲染和展示，采用这种技术可以使我们的应用看起来非常酷。

创建主视：Viewport

当我们运行应用时，我们必须建立的第一个视图是Viewport，这个是我们的主要视图，在这个视图中我们将会进行其他试图的描绘，你可以把它想象为画布。

在我们的app/views目录下，建立一个Viewport.js文件，并且在文件中添加下面的内容：

App.views.Viewport = Ext.extend(Ext.Panel, {

         fullscreen: true,

         layout: 'card',

         cardSwitchAnimation: 'slide',

         dockedItems: [

                 {

                          xtype: 'toolbar',

                          title: 'MvcTouch',

                 },

         ],

});

在view里都有些啥？

我们创建我们的视图在App.Views中，通过应用注册机制自动生成命名空间。我们的视图将是已经存在的组件/类（component/class.）的子类，我们通过传递两个参数到Ext.extend这个功能来创建这些视图。这两个参数是：超类（我们想扩展的类）和我们将添加属性和功能的对象。

对于我们的视图，我们选择扩展面板Panel类，并且设定一些属性：全屏（fullscreen）属性为true以便利用所有的空间；布局属性（layout）设置为“card”,使只有一个子组件在同一时间内是可视的；卡片开关动画“cardSwitchAnimation” 为“slide”将处理所有子控件怎样在屏幕上进行显示。

关于最后的一个属性:泊位Items（DockedItems）,Sencha touch文档中是这样描述的：“一个组件或一系列组件作为泊位条目被添加到Panel，泊位的条目可以泊位到顶部、右部、左部或底部，这是像工具条（toolbars）和Tab条之类的东西的典型的使用方式。

如果不致到xtype是何种东西，你需要参考这里文档（this）的内容。

现在我们需要例示说明viewport在我们的应用的launch启动功能：

launch: ()

{

         this.viewport = new App.views.Viewport();

},

我们分配viewport实例给我们的应用属性，以使我们在后续的控制器中访问它，访问方式为：this.application.viewport.

到测试前为止我们所完成的工作，我们需要把视图文件包含到index.html中，下面是视的说明：

<!-- VIEWS -->

< type="text/java" src="/app/views/Viewport.js"></>

现在我们可以测试了！你测试的结果应当看到下面的界面：

 

创建一个控制器的特定视图

对于特定的控制器使用的视图，我们将建立新目录，命名为控制器（小写）contoller，在app/views目录添加他们，所以，建立一个home目录在app/views中，并且在里面建立HomeIndexView.js文件。在index.html中包含进这些文件。