Sencha touch 开发指南.docVIP

Sencha touch 开发指南 本文主要介绍如何使用Sencha Touch为手持设备进行应用开发，主要是针对iPhone这样的高端手机，我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch简介 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。如何使用Sencha Touch1 下载Sencha Touch包，并按照以下结构创建项目列表 Sencha Touch包核心文件上图中加蓝色背景的图片为核心文件，必须载入。2 创建HTML文件，引入以下CSS和Javascript文件 view source print? 01.!DOCTYPE html 02.html 03.head 04.meta charset=utf-8 05.titleSencha 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=/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。 代码如下： view source print? 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组件，并在其中添加我们需要的其他组件。 view source print? 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