【IT168技术】在上一个关于sencha touch的教程《Sencha Touch实战》中，我们已对如何使用Sencha touch进行开发有了初步的认识。在本系列教程中，将学习如何使用Sencha Touch，开发一个适合在ipad上运行的网页应用，并详细讲解其中的技巧。本文的阅读对象为对Sencha Touch有一定基础的读者，如果读者不熟悉相关内容，请先查看上一篇教程。

　　构图设计

　　在本教程中，将指导大家使用Sench Touch，设计一个适合在ipad上观看的网站首页，并且有一定的动画效果，我们先来看下在模拟器上看到的最终效果图，如下图所示：

▲

　　在这个例子中，读者将学习到如何用Sencha Touch设计基本的ipad页面以及其中用到的技巧以及动画效果。下面我们开始学习的旅程。

　　设计页面构图

　　首先，我们来看下我们页面的构图，为了方便读者看到清晰看到页面的结构，我们用不同的颜色作了标识，如下图：

▲

　　框架页面设计

　　下面开始对index.html首页进行编码，代码如下：

　　这里，我们要把引用了Sencha touch中的CSS文件和核心文件，然后这里第一步，我们把要编写的js文件命名为index-a.js。

　　接者我们开始一步步编写index-a.js,代码如下：

　　首先在Ext.setup中，设置了 tabletStartupScreen属性，这个属性是适合在象ipad这样的平板电脑中设置的，指定了启动应用的界面图片，目前只能以tablet_startup.png命名，而且大小规定为768*1024 pixels。

　　同时，在icon属性中，指定了icon.png作为应用的图标，目前也只能使用icon.png的文件名命名。而glossOnIcon属性则指定了图标使用的是带光泽的效果(设置为true)。接下来，我们编写onfunction方法，代码如下：

　　我们逐一来分析以上的代码。首先，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进行一些修改，在其中增加一张图片，并且实现点头部的图标时，会弹出窗口。如下图所示：

▲

　　首先看如何在头部的嵌入图片，代码如下：

　　接下来，我们再加入一个小的pannel，内容为更新的时间，代码如下：

　　这里我们用了date的CSS样式，所以还要修改下index.html页，以引入一个CSS样式文件：

　　因为Sencha Touch默认的info图标比较大，所以这里用了自定义的图标，并且大小为21*21 pixels，能适合点击。

　　最后，我们将其组装起来，如下代码：

　　注意，这里使用了padding属性，分别为10，20，0，20，其中，即指定了其中的info控件距离屏幕最左边的距离为10象素，跟头部的图片为20象素，而图片与表示日期的控件的象素为0(即紧挨着)，最后的20表示日期控件距离屏幕的右边距离为20象素。在info控件及date控件之间，设置了一个component控件，用来放置图片。

　　接下来，我们期望实现的效果是，当用户点info控件中的小button时，会弹出一个窗口，我们先来设计这个窗口，如下：

　　在上面的代码中，通过modal属性设置弹出的这个窗口是模态的，即弹出口，除弹出窗外的其他部分是变灰色不可选择的，当点窗口外的任意部分时，弹出窗口会被关闭。Padding为5，设定了该弹出窗口边框的宽度。

　　而在dockeditems属性列表中，设置了弹出窗口的标题栏位属性，这里dock为top，即表明标题栏位于弹出窗口的最上方。而items属性列表则设置了弹出窗口文字部分的属性。

　　在完成弹出窗口后，需要在info按钮的事件中编写相关的代码打开它，代码如下：

　　在上面的代码中，在页面完全加载完毕后，为info按钮图标增加了相关的点击的处理事件函数，其中的内容为

　　popup.show('pop');

　　其中指定了上文的popup弹出窗口的显示方法为pop，当然如果不想用弹出窗口的效果的话，这里可以指定为popup.show()也可以，又或者可以使用其他效果，比如：

　　popup.show({type: 'slide', direction: 'down'});

　　小结

　　在本教程的第一部分，讲解了如何使用sencha touch去搭建基本的页面应用以及一些基本的技巧，在下一部分中，将进一步讲解更复杂点的动画技巧。