框架页面设计
下面开始对index.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,代码如下：
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方法，代码如下：
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。
运行后，效果如下图：
▲
