移动web应用开发——Sencha Touch篇(2)

了解了大致的Sencha Touch框架之后，我们就可以在其中进行代码的编写了。只要上一篇的内容都按部就班的做了，接下来要做的就是慢慢学这个框架，按照内容敲代码—看结果，基本没有什么过不去的地方。

首先跟上次一样，建立index.html文件和对应的app.js文件。用Sencha Touch搭建的移动web应用，app.js的内容框架大致如下：

Ext.application({

//以下为该应用程序的配置部分

name: 'MyApp',

icon: 'images/icon.jpg',//配置应用程序在手机主屏幕上的图标

glossOnIcon: false,

phoneStartupScreen: 'images/phone_startup.png',//配置应用程序启动之时的图标 iPhone或iPod

tabletStartupScreen: 'images/tablet_startup.png',//配置应用程序启动之时的图标 iPad

launch: function () {

//以下为在sencha touch中创建组件的方法

var panel = Ext.create('Ext.Panel', {

fullscreen: true,

id: 'myPanel',

style: 'color:red',//指定面板的一些css样式

html: '一个简单的示例面板'//指定面板组件中的HTML代码

});

}

});

这里面在代码的后面都给出了相应的注释。其中launch之前的为基本配置，包括了App的名字、图标等等。launch内的内容就是我们要编写的应用程序了。这里在我们的web app中添加了一个panel(面板)，利用的就是基本的Sencha Touch中创建组件的方法。创建组件时，要利用键值对的形式对组件进行各种配置。这里我们分别设定了如下属性：

fullscreen:设置该面板是否与屏幕大小相同，这里我们选择了true

id:给我们创建的这个组件设定id，这个id很重要，每一个组件都要有，方便我们以后利用ext.js对其进行获取和操作

style:我们通过这个属性可以利用css设定组件的一些基本样式

html:制定组件中的HTML代码

通过上述简单的操作，我们就搭建了一个最基本的web app界面。

除了上述的创建组件方法外，还有其他的方法。

var panel = new Ext.panel({

//do something

})

这里直接利用new关键字，后面跟上要创建的Ext对象的类名，即可创建一个相应的组件，与上述创建方法达到的效果相同。

以上就是Sencha Touch框架使用的基本方法和规范，接下来我们就可以针对每一个模块，逐一进行学习了。