【IT168技术】在上一讲中,我们学习了如何使用Sencha Touch制作基本的页面结构,并学习了其中使用Sencha Touch的一些技巧,在本讲中,将继续完成余下的功能设计,并学习更多的Sencha Touch的使用方法和技巧。
设计页面左边部分
我们开始设计页面的左边部分，预期的效果图如下所示：
▲
在上图中，可以看到左边的区域中，有两个区域块，一个是导航部分，一个是下方的调查部分。这两个部分样式基本上是一样的，因此可以通过sencha touch中的template模板面板去进行控制。
我们先设计第一个区域块的HTML，代码如下：
"<br><p>See us at these upcoming trade shows and events:</p><br><b>Event One</b><br>Address<br>City<br>Dates<br><br><p><b>Event One</b><br>Address<br>City<br>Dates<br><br><p><b>Event One</b><br>Address<br>City<br>Dates<br>" };
可以看到，这里指定了headline和body两个变量，并分别为它们赋值了相关的内容，其中body变量中的是HTML代码。
接下来我们开始定义使用template模版面板，代码如下：
'<tpl for=".">',
'<div class="headline-block">{headline}</div>',
'<div class="bodycopy-block">{body}</div>',
'</tpl>'
);
var blockOne = new Ext.Panel({
style:"background-color:#e8f4d7",
layout: 'auto',
padding: 15,
tpl: events
});
blockOne.update(block1);
首先，这里的events变量初始化了Ext中的Template模版，其中使用{headline}和{body}分别定义了模版中的两个变量。而blockOne则是一个普通的面板，留意其中的tpl:events，表示这个面板中的内容将会是模版中的实际内容，而最后一句blockOne.update(block1);则实现了将之前定义的block1实际的HTML块替换到模版events中去。
同样道理，另外的调查问卷部分的代码也类似，只不过稍微更复杂了点，如下：
{
headline:
"Your Opinion Counts!", body: "<br><p><a href='http:/www.jamie-cross.net'>This will be a survey question located somewhere on the internet.</a></p><br>", body2: "<p><a href='http:/www.jamie-cross.net'>See the results of last months poll.</a></p>" };
var survey = new Ext.Template(
'<tpl for=".">',
'<div class="headline-block">{headline}</div>',
'<div class="bodycopy-block">{body}</div>',
'<div><img src="bars.png" width="131" height="128"/></div>',
'<div class="bodycopy-block2">{body2}</div>',
'</tpl>'
);
var blockTwo = new Ext.Panel({
style:"background-color:#e8f4d7",
layout: 'auto',
padding: 15,
tpl: survey
});
blockTwo.update(block2);
最后，我们重新修改下左边部分之前的slidebar部分，修改如下：
flex: 1,
padding: '0 0 0 20',
layout: {
type:'vbox',
align:'start'
},
items: [
blockOne,
{
xtype: 'component',
height: 10,
width: 10
},
blockTwo
],
});
注意这里，我们在blockOne和blockTwo两个面板中，设置了相关的分割组件，宽度和高度均为10
设计页面主要部分
在学习完使用模版后，接下来我们开始设计页面中的右边部分，即主体部分，期望设计后的运行效果如下图：
▲
在右边的页面部分中，最上方突出显示的部分是显示了新闻的主要部分，我们先设计该部分的代码，同上文一样，我们采用了template技术，先定义主要新闻内容的变量，如下：
可以看到，依然定义了headline,image_url和body部分，在body部分，这里是静态固定了新闻内容，在实际的应用中，一般是动态从数据库中获取数据。接下来，我们继续使用模版面板的技术，代码如下：
'<tpl for=".">',
'<div class="headline-main">{headline}</div>',
'<div><img src="{image_url}" width="468" height="220" /></div>',
'<div class="bodycopy">{body:ellipsis(475, true)}</div>',
'</tpl>'
);
这里只需要注意使用了内置的ellipsis方法去截取字符串，最多保留475个字符。
接下来，象上一讲那样，完善我们的面板，如下：
layout: 'auto',
tpl: storyMain
});
storyPanelOne.update(story1);
最后，不要忘记在我们第一讲中的右边部分的最大的面板stories中，进行修改，如下：
height: 859,
flex: 2,
scroll: 'vertical',
items: [storyPanelOne]
});
这里设置了scroll属性，即有了滚动条(垂直往下的)，方便用户向下拉，以查看更多的内容。完成剩下的三个新闻区域
最后，我们把剩下的右边区域下方的三个新闻区域完成。同样，先定义三个变量，分别指向其实际内容：
var story3 = { headline: "This Third Story Headline Can Be Two Lines.", image_url: "imagesub2.png", body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat." };
var story4 = { headline: "The Fourth Story Headline", image_url: "imagesub3.png", body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat." };
并且编写模版和使用这些模版的面板，如下：
'<tpl for=".">',
'<div class="substory">',
'<div><hr /></div>',
'<div class="image"><img src="{image_url}" /></div>',
'<div class="substory-content">',
'<div class="headline-main">{headline}</div>',
'<div class="bodycopy">{body:ellipsis(170, true)}</div>',
'</div>',
'</div>',
'</tpl>'
);
var storyPanelTwo = new Ext.Panel({
layout: 'auto',
tpl: storySub
});
var storyPanelThree = new Ext.Panel({
layout: 'auto',
tpl: storySub
});
var storyPanelFour = new Ext.Panel({
layout: 'auto',
tpl: storySub
});
storyPanelOne.update(story1);
storyPanelTwo.update(story2);
storyPanelThree.update(story3);
storyPanelFour.update(story4);
var stories = new Ext.Panel({
height: 859,
flex: 2,
scroll: 'vertical',
items: [storyPanelOne, storyPanelTwo, storyPanelThree, storyPanelFour]
});
可以看到，其中在items中，按从上到下的顺序，把4个面板都分别加了进来。
查看详细新闻的动画效果
接下来，我们尝试实现的效果是：当用户点“头条新闻”区的新闻时，会一个旋转反转的效果，显示这条新闻的详细内容，这在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的熟悉者能很容易地掌握移动开发。
