设计头部pannel
接下来，我们尝试对头部的pannel进行一些修改，在其中增加一张图片，并且实现点头部的图标时，会弹出窗口。如下图所示：
▲
首先看如何在头部的嵌入图片，代码如下：
html: '<center><img src="masthead.png"/></center>',
height: 70,
});
接下来，我们再加入一个小的pannel，内容为更新的时间，代码如下：
html: '<div class="date">Updated on: 05.06.11</div>',
});
这里我们用了date的CSS样式，所以还要修改下index.html页，以引入一个CSS样式文件：
再加入一个info面板，其中有一个图标，代码如下：
var info = new Ext.Panel({
html: '<img src="info.png"/>',
height: 35,
width: 35,
});
因为Sencha Touch默认的info图标比较大，所以这里用了自定义的图标，并且大小为21*21 pixels，能适合点击。
最后，我们将其组装起来，如下代码：
height: 35,
padding: '10 20 0 20',
layout: {
type:'hbox',
align:'start'
},
items: [
info,
{
xtype: 'component',
flex: 1
},
date
],
});
注意，这里使用了padding属性，分别为10，20，0，20，其中，即指定了其中的info控件距离屏幕最左边的距离为10象素，跟头部的图片为20象素，而图片与表示日期的控件的象素为0(即紧挨着)，最后的20表示日期控件距离屏幕的右边距离为20象素。在info控件及date控件之间，设置了一个component控件，用来放置图片。
接下来，我们期望实现的效果是，当用户点info控件中的小button时，会弹出一个窗口，我们先来设计这个窗口，如下：
floating: true,
modal: true,
centered: true,
padding: 5,
width: 500,
height: 425,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'APP Info',
}
],
items: [
{
xtype: 'panel',
centered: true,
padding: 20,
html: '<div class="infobox">You can fill this popup with whatever content you may like.</div>'
}
]
在上面的代码中，通过modal属性设置弹出的这个窗口是模态的，即弹出口，除弹出窗外的其他部分是变灰色不可选择的，当点窗口外的任意部分时，弹出窗口会被关闭。Padding为5，设定了该弹出窗口边框的宽度。
而在dockeditems属性列表中，设置了弹出窗口的标题栏位属性，这里dock为top，即表明标题栏位于弹出窗口的最上方。而items属性列表则设置了弹出窗口文字部分的属性。
在完成弹出窗口后，需要在info按钮的事件中编写相关的代码打开它，代码如下：
this.body.on('click', function(){
popup.show('pop');
});
});
在上面的代码中，在页面完全加载完毕后，为info按钮图标增加了相关的点击的处理事件函数，其中的内容为
popup.show('pop');
其中指定了上文的popup弹出窗口的显示方法为pop，当然如果不想用弹出窗口的效果的话，这里可以指定为popup.show()也可以，又或者可以使用其他效果，比如：
popup.show({type: 'slide', direction: 'down'});
小结
在本教程的第一部分，讲解了如何使用sencha touch去搭建基本的页面应用以及一些基本的技巧，在下一部分中，将进一步讲解更复杂点的动画技巧。
