<!-- 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属性）。