构建程序基本结构
首先,在程序中的结构如下图所示,其中有三个主要的文件:index.html,app.js和app.cs。
在index.html中，主要功能是启动整个应用程序并且引用相关的类库，如下代码：
<script class="hiddenSpellError"></script>
<script src=”senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>
<script src=”senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>
这里,首先引入了sencha touch本身的类库JS代码,然后再引入app.css和app.js两个文件,其中app.css为样式文件,app.js文件为程序的核心功能JS文件。
下面我们介绍app.js中的具体代码，首先是在app.js中进行初始化：
var App = new Ext.Application({
name : 'NotesApp',
useLoadMask : true,
launch : function () {
}
})
name : 'NotesApp',
useLoadMask : true,
launch : function () {
}
})
其中，Ext.Application的实例的初始化，意味者一个sencha touch应用的建立，具体的可以参考(http://dev.sencha.com/deploy/touch/docs/?class=Ext.Application)中对该类的说明，这个类的实例化后，会自动创建一个全局的变量NotesApp,并且同时建立了如下的命名空间：
NotesApp
NotesApp.views、
NotesApp.controllers
NotesApp.models
NotesApp.stores
而launch的方法只会运行一次，在这里可以创建应用程序的viewport界面视图，代码如下：
launch: function () {
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
html:'This is the viewport'
});
}
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
html:'This is the viewport'
});
}
我们将整个界面布局设置为使用Panel面板，并且设置了fullscreen属性为true,同时也会设置monitorOrientation属性的值为true，这个是很有用的一个属性，因为它可以让panel面板监听屏幕方向发生变化时候的事件。当我们运行后，显示如下的界面：
