查看详细新闻的动画效果
接下来，我们尝试实现的效果是：当用户点“头条新闻”区的新闻时，会一个旋转反转的效果，显示这条新闻的详细内容，这在ipad中是一个很好的用户体现，反转后的页面效果如下图：
▲
我们首先来制作这个具体的新闻页面的过程。同样，也是使用sencha touch中的模版技术，先定义新闻的具体内容var storyOneContent = { headline:…….body:…………..}//此处篇幅所限省略。接下来，同样是使用模版技术，代码如下：
var storyContent = new Ext.Template(
'<tpl for=".">',
'<div class="headline-main">{headline}</div>',
'<div><br></div>',
'<div id="fullstory" class="fullstorycopy">{body}</div>',
'</tpl>'
);
var fullStoryPanelOne = new Ext.Panel({
padding: 15,
layout: 'auto',
tpl: storyContent
});
fullStoryPanelOne.update(storyOneContent);
storyPanelOne.on('afterrender', function(){
this.body.on('click', function(){rootPanel.setActiveItem(1);});
});
var backHandler = function () {
rootPanel.setActiveItem(0);
}
var fullStoryOne = new Ext.Panel({
fullscreen:true,
style:"background-color:white",
scroll: 'vertical',
items: [fullStoryPanelOne],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
ui: 'light',
items: [{
ui: 'back',
text: 'back',
handler: backHandler
}]
}
],
});
同样，在这里设置了storyContent模版，并且在fullStoryPanelOne面板中应用了该模版。接下来，storyPanelOne.on这段代码块中，其实是上一讲中提到的页面中的主要新闻模块，并且在这个模块中指定了当点击时打开的事件，这个稍后会详细讲解。而backHandler则设置了后退按钮所触发的事件，稍后也会详细讲解。
而 fullStoryOne则是代表新闻详细内容页的全部页面的面板，比较容易理解，其中xtype中指定了工具栏位，在items中指定了后退的按钮以及在handler中指出了处理的事件为之前定义好的方法backHandler。
最后，我们回过头看下 rootPanel这段代码是怎么回事。先来看下整个页面的旧的代码，代码结构如下：
fullscreen:true,
style:"background-color:white",
layout: {
type:'vbox',
align:'stretch'
},
items:[header, masthead, content] });
现在，我们重新对其命名，将以上代码改为：
fullscreen:true,
style:"background-color:white",
layout: {
type:'vbox',
align:'stretch'
},
items:[header, masthead, content]
});
为了当点首页的重点新闻部分，能有动画效果转入新闻详细页面，重新写的rootPanel代码如下：
fullscreen:true,
layout: "card",
cardSwitchAnimation: {type: 'flip', duration: 1000},
items:[frontPagePanel, fullStoryOne]
});
这里，注意我们使用了layout为"card",这个布局文件是sencha touch自带的布局文件，可以通过在items中设置多个面板，然后用户通过点击或者滑动，在多个面板中进行切换，十分方便。所以可以看到，这里的items中，分别设置了frontPagePanel(即原来的首页)，fullStoryOne(即重点新闻的详细页)。而在cardSwitchAnimation中，设置了其动画效果，类型为'flip',持续时间为1000微秒，如果不满意这种旋转翻动的效果，可以另外设置效果，比如从左到右的过渡渐变，如下：
cardSwitchAnimation: {type: ‘slide’, direction: ‘left’, duration: 1000}
现在，再回过头来看上文中的两段代码，一个是当用户在阅读完重点新闻内容页后，点返回按钮时，返回首页的的代码：
rootPanel.setActiveItem(0);
}
这里，通过 rootPanel.setActiveItem(0)中的setActiveItem方法，激活了在rootPanel面板的items的面板数组列表中的第1个元素(从0开始)，即首页，这样就返回了首页了。同样，在首页中，当点重点新闻的任意部分时，会跳转到重点新闻的详细页，代码为：
this.body.on('click', function(){rootPanel.setActiveItem(1);});
});
同理，这里的点击事件中，调用rootPanel.setActiveItem(1)，即跳转到了新闻的详细页面板，items面板数组中的第2个元素，也就是fullStoryOne面板，从而完成了我们的动画效果。
小结：
在本系列教程中，讲解了如何使用Sench Touch，去设计符合ipad的页面，其中讲解了不少Sencha Touch使用和设计的技巧。Sencha Touch目前支持多种移动设备，让有一定基础的Javascript开发者及Ext Js的熟悉者能很容易地掌握移动开发。
