Stoneson

石头记

Sencha+touch+开发指南


Sencha touch 开发指南
本文主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程。

Sencha Touch简介

Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app,用户界面组件和数据管理全部基于HTML5和CSS3的web标准,全面兼容Android和Apple iOS。

如何使用Sencha Touch

1 下载Sencha Touch包,并按照以下结构创建项目列表

Sencha Touch包核心文件
上图中加蓝色背景的图片为核心文件,必须载入。

2 创建HTML文件,引入以下CSS和Javascript文件

01 <!DOCTYPE html>
02  <html>
03  <head>
04      <meta charset="utf-8">
05      <title>Sencha Touch Test</title>
06  
07      <!-- Sencha Touch CSS -->
08      <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
09  
10      <!-- Custom CSS -->
11      <link rel="stylesheet" href="css/guide.css" type="text/css">
12  
13      <!-- Google Maps JS -->
14      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
15  
16      <!-- Sencha Touch JS -->
17      <script type="text/javascript" src="../../sencha-touch-debug.js"></script>
18  
19      <!-- Application JS -->
20      <script type="text/javascript" src="src/index.js"></script>
21  
22  </head>
23  <body></body>
24  </html>

这样我们的HTML结构就搭建完成了。

3 使用Sencha Touch创建新的应用程序

我们在这里使用一个电视内容查询的应用来详细介绍如何使用Sencha Touch来进行应用程序的开发。

我们首先使用Ext.setup方法来创建一个应用,你可以通过设置不同的参数来设置你的应用,具体的信息可以查阅API,查看Sencha Touch API Documentation

代码如下:

1 Ext.setup({
2     icon: 'icon.png',
3     tabletStartupScreen: 'tablet_startup.png',
4     phoneStartupScreen: 'phone_startup.png',
5     glossOnIcon: false,
6     onReady: function() {
7     }
8 });

在上面的程序里面我们需要注意onReady方法,它会在整个DOM结构载入可用的情况下调用里面的内容。

下面我们先在onReady下面创建一个TabPanel组件,并在其中添加我们需要的其他组件。

01 var tabpanel = new Ext.TabPanel({
02                 tabBar: { // an Ext.TabBar configuration
03                     dock: 'bottom', //the tabbar position
04                     layout: {
05                          pack: 'center' // the icon position
06                     }
07                 },
08                 fullscreen: true, //this component will take up the full width and height of the screen and automatically renders the component to the page
09                 cardSwitchAnimation: {
10                     type: 'pop',
11                     cover: true
12                 },
13                 items: [{
14                     title: 'Schedule',
15                     iconCls: 'time',// the button icon
16                     cls: 'card1', // an optional extra CSS class will be added to this component's element.
17                     id: 'tab1',
18                     dockedItems: [{
19                         xtype: 'toolbar',
20                         ui: 'light',
21                         dock: 'top',
22                         items: [
23                             tvTitle ,
24                             { xtype: 'spacer' },
25                             { text: 'Change...', ui: 'action', handler: function() {tvPicker.show();} },
26                         ]
27                     }, {
28                     xtype: 'panel',
29                     dock: 'bottom',
30                     height: 48,
31                     html: ''
32                 }],
33                     items: [
34                         tvList
35                     ]
36                 }, {
37                     title: 'About',
38                     html: '<table border="0" align="center" width="95%"><tr><td align="left"><br />'
39                     +'<h1>Sport on TV</h1><br />Version 1.0 for iPhone<br />Using <a style="color:#000;text-decoration:none;" href="http://www.sencha.com/">Sencha Touch</a> framework.<br /><br /><br />'
40                     +'<h1>Help</h1><br />Instantly discover what, when and where there is live sport on TV in the UK. (All times are GMT.)<br />To browse the schedule, tap <strong>Change...</strong> and select a sport and TV network. For additional information, tap the fixture.<br /><br /><br />'
41                     +'<h1>Disclaimer</h1><br />Although every effort is made to ensure schedule information provided within the app is accurate, we can make no guarantee that it is always correct and can not accept responsibility for inaccurate information. Please double-check any fixtures that are important to you to avoid disappointment. Please also note that this app does not claim to stream video; it is a tool to display schedules of live sporting events on TV in the UK.<br /><br /><br />',
42                     cls: 'card4',
43                     styleHtmlContent: true,
44                     iconCls: 'info',
45                     id: 'tab2'
46                 }]
47             });
48  
49             tvStore.load();

fullscreen这个参数是用来设置“首页”的,就是把当前的组件设置成为用户最先看到的组件。

Items是用来设置该组件下面的具体内容。可以添加另外的组件到该组件下,使整个页面可以灵活组合,实现各种功能。

在上面的代码中我们在schedule这个tab下面又添加了tvList和tvTitle这两个组件,tvList用来显示后台传递过来的数据,tvTitle用来显示当前的类别,我们会在下面做详细的介绍。

最下面我们调用了tvStore.load(),这里是使用了Ext.data.Store组件,来读取后台的数据。在使用Store之前,我们还必须使用Ext.regModel来注册一个model,供我们存放数据使用。代码如下:

01 Ext.regModel('tvGuide', {
02 fields: ['tvSport', 'tvComp', 'tvChannel', 'tvGroup', 'tvDay', 'tvTime', 'tvFixture', 'tvIcon']
03             });
04     var tvStore = new Ext.data.Store({
05                 id: 'tvLocal',
06                 model: 'tvGuide',
07                 sorters: 'tvDay',
08                 // autoLoad: true,
09                 getGroupString: function(record) { return record.get('tvDay'); },
10                 proxy: {
11                     type: 'ajax',
12                     url: 'http://localhost/sencha/test.txt',
13                     reader: {
14                         type: 'json',
15                         root: 'fixtures'
16                     }
17                 },
18                 filters: [
19                     {
20                         property: 'tvSport',
21                         value: 'Football'
22                     }
23                 ]
24             });

这里使用了ajax去后台读取并返回json格式的数据。

text.txt是返回的json数据,格式如下:

1 {
2     "fixtures": [
3 {"tvSport": "Cricket", "tvComp": "The Ashes T3 D1", "tvChannel": "Sky Sports 1", "tvGroup": "Sky Sports", "tvDay": "Today", "tvTime": "02:00", "tvFixture": "Australia<br />England", "tvIcon": "ss1.png"},
4 {"tvSport": "Golf", "tvComp": "SA Open", "tvChannel": "Sky Sports 3", "tvGroup": "Sky Sports", "tvDay": "Today", "tvTime": "08:30", "tvFixture": "Day 1", "tvIcon": "ss3.png"},
5 {"tvSport": "Cricket", "tvComp": "1st Test, Day 1", "tvChannel": "Sky Sports 1", "tvGroup": "Sky Sports", "tvDay": "Today", "tvTime": "10:00", "tvFixture": "South Africa<br />India", "tvIcon": "ss1.png"},
6 {"tvSport": "Football", "tvComp": "Blue Square Premier", "tvChannel": "Premier Sport (MSK)", "tvGroup": "Other", "tvDay": "Today", "tvTime": "19:45", "tvFixture": "Crawley Town<br />Mansfield Town", "tvIcon": "premsport.png"},
7 {"tvSport": "Football", "tvComp": "Victory Shield", "tvChannel": "Sky Sports 4", "tvGroup": "Sky Sports", "tvDay": "Today", "tvTime": "19:45", "tvFixture": "England<br />Scotland", "tvIcon": "ss4.png"},
8 {"tvSport": "Fighting", "tvComp": "MMA", "tvChannel": "ESPN", "tvGroup": "ESPN", "tvDay": "Today", "tvTime": "22:30", "tvFixture": "UFC", "tvIcon": "espn.png"}
9 ]}

数据有了,那我们怎么样才能让数据显示出来呢?这里我们就需要使用tvList和tvTitle来显示数据和数据的分类,代码如下:

01 var tvList = new Ext.List({
02                 xtype: 'list',
03               &nbs