【IT168技术】在上一讲中,我们学习了如何使用Sencha Touch制作基本的页面结构,并学习了其中使用Sencha Touch的一些技巧,在本讲中,将继续完成余下的功能设计,并学习更多的Sencha Touch的使用方法和技巧。
设计页面左边部分
我们开始设计页面的左边部分，预期的效果图如下所示：
▲
在上图中，可以看到左边的区域中，有两个区域块，一个是导航部分，一个是下方的调查部分。这两个部分样式基本上是一样的，因此可以通过sencha touch中的template模板面板去进行控制。
我们先设计第一个区域块的HTML，代码如下：
var block1 = { headline: "Upcoming Events", body:
"<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>" };
"<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模版面板，代码如下：
var events = new Ext.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);
'<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中去。
同样道理，另外的调查问卷部分的代码也类似，只不过稍微更复杂了点，如下：
var block2 =
{
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);
{
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部分，修改如下：
var sidebar = new Ext.Panel({
flex: 1,
padding: '0 0 0 20',
layout: {
type:'vbox',
align:'start'
},
items: [
blockOne,
{
xtype: 'component',
height: 10,
width: 10
},
blockTwo
],
});
flex: 1,
padding: '0 0 0 20',
layout: {
type:'vbox',
align:'start'
},
items: [
blockOne,
{
xtype: 'component',
height: 10,
width: 10
},
blockTwo
],
});
注意这里，我们在blockOne和blockTwo两个面板中，设置了相关的分割组件，宽度和高度均为10
