在51CTO的专题“Sencha Touch入门教程”中我们已对如何使用Sencha touch进行开发有了初步的认识。在本系列教程中，将学习如何使用Sencha Touch，开发一个适合在iPad上运行的网页应用，并详细讲解其中的技巧。本文的阅读对象为对Sencha Touch有一定基础的读者，如果读者不熟悉相关内容，请先查看51CTO的专题。
构图设计
在本教程中，将指导大家使用Sench Touch，设计一个适合在iPad上观看的网站首页，并且有一定的动画效果，我们先来看下在模拟器上看到的最终效果图，如下图所示：
在这个例子中，读者将学习到如何用Sencha Touch设计基本的ipad页面以及其中用到的技巧以及动画效果。下面我们开始学习的旅程。
设计页面构图
首先，我们来看下我们页面的构图，为了方便读者看到清晰看到页面的结构，我们用不同的颜色作了标识，如下图：
框架页面设计
下面开始对index.html首页进行编码，代码如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Newsletter</title>
- <!-- Sencha Touch CSS -->
- <link rel="stylesheet" href="../sencha-touch/resources/css/sencha-touch.css" type="text/css">
- <!-- Sencha Touch JS -->
- <script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>
- <!-- Application JS -->
- <script type="text/javascript" src="index-a.js"></script>
- </head>
- <body></body>
这里，我们要把引用了Sencha touch中的CSS文件和核心文件，然后这里***步，我们把要编写的js文件命名为index-a.js。
接者我们开始一步步编写index-a.js,代码如下：
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- icon: 'icon.png',
- glossOnIcon: true,
- });
首先在Ext.setup中，设置了 tabletStartupScreen属性，这个属性是适合在象ipad这样的平板电脑中设置的，指定了启动应用的界面图片，目前只能以tablet_startup.png命名，而且大小规定为768*1024 pixels。
同时，在icon属性中，指定了icon.png作为应用的图标，目前也只能使用icon.png的文件名命名。而glossOnIcon属性则指定了图标使用的是带光泽的效果(设置为true)。接下来，我们编写onfunction方法，代码如下：
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- icon: 'icon.png',
- glossOnIcon: true,
- onReady: function() {
- var header = new Ext.Panel({
- height: 35,
- style:"background-color:lightblue;",
- html: "The info button and updated on date will go here."
- });
- var masthead = new Ext.Panel({
- height: 70,
- style:"background-color:blue;",
- html: "The masthead will go here."
- });
- var sidebar = new Ext.Panel({
- flex: 1,
- style:"background-color:red;",
- html: "The sidebar information will go here.",
- });
- var stories = new Ext.Panel({
- flex: 2,
- style:"background-color:green;",
- html: "The main story information will go here."
- });
- var content = new Ext.Panel({
- height: 899,
- layout: {
- type:'hbox',
- align:'stretch'
- },
- items: [
- sidebar,
- {
- xtype: 'component',
- height: 10,
- width: 10
- },
- stories
- ]
- });
- rootPanel = new Ext.Panel({
- fullscreen:true,
- style:"background-color:white",
- layout: {
- type:'vbox',
- align:'stretch'
- },
- items:[header, masthead, content]
- });
- }
我们逐一来分析以上的代码。首先，onready方法，发生在当页面加载完毕时启用。接下来，我们定义了多个pannel面板控件，面板的作用是包含其他的控件，并形成相对独立的区域，在教程中，我们只是将pannel中填上颜色及文字以示区别。
在head面板中，注意到设定了height高度，由于这里是针对ipad，所以这里设置了特定的高度，如果要针对其他移动设备的话，这里也可以根据实际情况设定实际的高度。而 style属性中，设定使用的样式属性，可以设置多个值，这里只设定了使用背静颜色为绿色(background-color：blue)。而html则设置了该pannel中的文本文字。
接下来的几个pannel面板中，其设置相关的值跟head面板差不多，这里不再详细描述。要注意的一点是，其中在sidebar面板中，设置了flex的属性值为1，在stories面板中，设置了其属性值为2，可以看到sidebar的宽度实际上为stories面板宽度的1/2。假如要设置为stories面板宽度的1/3，则只需要把stories面板中的flex属性值设置为3即可。
在content面板中，演示了如何在一个面板中包含多个其他的面板，这里设置了高度height为899pixels,注意如果将pannel中的所有面板的高度相加，会发现高度为1004，而不是ipad的面板高度1024，因为还有的20pixels高度为ipad本身的状态工具栏所占有的。而layout属性组中，设置了type属性为hbox，代表面板内的控件布局方式为从左到右的水平布局方式，而stretch表示控件的对齐方式为全部填充满父控件的大小。在items属性列表中，分别列出了slidebar，stories两个面板，而其中之间用大括号括起来的部分，其实这里是又增加了一个分割的控件，其宽度和高度均为10，这里使用了xtype:component 的方法，演示了另外一种创建控件的方法，当然这里你也可以依然使用pannel控件。
***部分，再设置了一个大的pannel控件面板rootPanel,其中设置了全屏属性(fullscreen:true)，背景颜色设置为白色，而布局方式这里设置为vbox，即从上到下，垂直摆放三个面板header, masthead, content。
运行后，效果如下图：
设计头部pannel
接下来，我们尝试对头部的pannel进行一些修改，在其中增加一张图片，并且实现点头部的图标时，会弹出窗口。如下图所示：
首先看如何在头部的嵌入图片，代码如下：
- var masthead = new Ext.Panel({
- html: '<center><img src="masthead.png"/></center>',
- height: 70,
- });
接下来，我们再加入一个小的pannel，内容为更新的时间，代码如下：
- var date = new Ext.Panel({
- html: '<div class="date">Updated on: 05.06.11</div>',
- });
这里我们用了date的CSS样式，所以还要修改下index.html页，以引入一个CSS样式文件：
- <link rel="stylesheet" href="newsletter.css" type="text/css">
再加入一个info面板，其中有一个图标，代码如下：
- var info = new Ext.Panel({
- html: '<img src="info.png"/>',
- height: 35,
- width: 35,
- });
因为Sencha Touch默认的info图标比较大，所以这里用了自定义的图标，并且大小为21*21 pixels，能适合点击。
***，我们将其组装起来，如下代码：
- var header = new Ext.Panel({
- 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时，会弹出一个窗口，我们先来设计这个窗口，如下：
- var popup = new Ext.Panel({
- 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按钮的事件中编写相关的代码打开它，代码如下：
- info.on('afterrender', function(){
- this.body.on('click', function(){
- popup.show('pop');
- });
- });
在上面的代码中，在页面完全加载完毕后，为info按钮图标增加了相关的点击的处理事件函数，其中的内容为popup.show('pop');
其中指定了上文的popup弹出窗口的显示方法为pop，当然如果不想用弹出窗口的效果的话，这里可以指定为popup.show()也可以，又或者可以使用其他效果，比如：
- popup.show({type: 'slide', direction: 'down'});
小结
在本教程的***部分，讲解了如何使用sencha touch去搭建基本的页面应用以及一些基本的技巧，在下一部分中，将进一步讲解更复杂点的动画技巧。
