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

<!-- VIEWS -->
< type="text/java" src="/app/views/Viewport.js"></>
< type="text/java" src="/app/views/home/HomeIndexView.js"></>

在HomeIndexView.js中添加下面的内容：

App.views.HomeIndex = Ext.extend(Ext.Panel, {
         html: "<h3>A Lover's Complaint</h3>" +
                 "<h4>a poem by</h4>" +
                 "<h3>William Shakespeare</h3>" +
                 "<p>From off a hill whose concave womb reworded</br>" +
                 "A plaintful story from a sist'ring vale,</br>" +
                 "My spirits t'attend this double voice accorded,</br>" +
                 "And down I laid to list the sad-tuned tale,</br>" +
                 "Ere long espied a fickle maid full pale,</br>" +
                 "Tearing of papers, breaking rings atwain,</br>" +
                 "Storming her world with sorrow's wind and rain.</br>" +
                 "Upon her head a platted hive of straw,</br>" +
                 "Which fortified her visage from the sun,</br>" +
                 "Whereon the thought might think sometime it saw</br>" +
                 "The carcase of a beauty spent and done.</br>" +
                 "Time had not scythed all that youth begun,</br>" +
                 "Nor youth all quit, but spite of heaven's fell rage</br>" +
                 "Some beauty peeped through lattice of seared age.</p>" +
 
                 "<p>Oft did she heave her napkin to her eyne,</br>" +
                 "Which on it had conceited characters,</br>" +
                 "Laund'ring the silken figures in the brine</br>" +
                 "That seasoned woe had pelleted in tears,</br>" +
                 "And often reading what contents it bears;</br>" +
                 "As often shrieking undistinguished woe</br>" +
                 "In clamours of all size, both high and low.</p>",
});
Ext.reg('HomeIndex', App.views.HomeIndex);

HomeIndexView利用html的属性（html property），在那里我们添加了一些内容在视图中，Ext.reg这个功能为我们的这个类注册了一个xtype。
从控制器重勾画视图
打开HomeController.js，并针对索引action()进行如下的变更：

// index action
index: ()
{
         if ( ! this.indexView)
         {
                 this.indexView = this.render({
                          xtype: 'HomeIndex',
                 });
         }
 
         this.application.viewport.setActiveItem(this.indexView);
},

第一步我们需要测试就是是否视图类已经被建立起来了，如果没有被建立，我们要建立一个用控制器描述渲染的一个视图实例，并分配给相应的变量，通过传递渲染功能函数，用一个注册登记xtype的对象作为其一个属性。
当我们已经有了一个视图实例，我们把它以参数的形式传递给视图窗口（viewport）的setActiveItem功能函数，这个功能函数将把视图作为视图窗口的子类。刷新的浏览器，你将看到索引视图是如何展示在屏幕上，并且附带从左至右的滑动动画效果（记住在我们的视图窗口中设定cardSwitchAnimation属性）。