准备

开始开发前，请先到下面的地址下载Sencha Touch 2的包：http://www.sencha.com/products/touch/download/ 。下载完解压后你会发现包里有很多文件。里面有api文档、开发包和一些实例等等。现在，我们只需要sencha-touch-debug.js和resources/css/sencha-touch.css文件即可。（sencha-touch-debug.js文件里面是未经压缩的带注释的js代码，方便我们阅读和debug）。

包文件到手了，选上一个你喜欢的IDE，建立一个web项目并把文件引进吧。我选了Aptana Studio建立了以下目录结构：

开始种码

在根目录新建一个app.html文件，在app目录下新建一个app.js文件（用于编写我们的js代码）。然后，把需要的内容引进app.html文件中，如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>First App</title>
  6. <link rel="stylesheet" href="js/lib/sencha-touch.css" type="text/css">
  7. <link rel="stylesheet" href="css/style.css" type="text/css">
  8. <script type="text/javascript" src="js/lib/sencha-touch-debug.js"></script>
  9. <script type="text/javascript" src="app/app.js"></script>
  10. </head>
  11. <body></body>
  12. </html>
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>First App</title>

    <link rel="stylesheet" href="js/lib/sencha-touch.css" type="text/css">

    <link rel="stylesheet" href="css/style.css" type="text/css">

    <script type="text/javascript" src="js/lib/sencha-touch-debug.js"></script>

    <script type="text/javascript" src="app/app.js"></script>

</head>

<body></body>

</html>

1.打开 app/app.js文件，正式开始编写我们第一个Sencha Touch App了。今天我们利用Tab Panel来建立一个拥有四个页面的App。首先，我们先建立一个Tab Panel，在app.js里种入如下代码：

  1. Ext.application({
  2. name: 'Sencha',
  3. launch: function() {// 应用启动时执行该方法
  4. Ext.create("Ext.tab.Panel", {
  5. fullscreen: true,
  6. items: [
  7. {
  8. title: 'Home',
  9. iconCls: 'home',
  10. html: 'Welcome'
  11. }
  12. ]
  13. });
  14. }
  15. });
Ext.application({

    name: 'Sencha',

    launch: function() {// 应用启动时执行该方法

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            items: [

                {

                    title: 'Home',

                    iconCls: 'home',

                    html: 'Welcome'

                }

            ]

        });

    }

});

保存后，可用支持HTML5的浏览器（我是chrome爱好者）打开app.html文件观看效果，如下

现在，我们来改进一下这个页面：

  1. launch: function() {
  2. Ext.create("Ext.tab.Panel", {
  3. fullscreen: true,
  4. tabBarPosition: 'bottom',  // 将标签栏定位到底部
  5. items: [
  6. {
  7. title: 'Home',
  8. iconCls: 'home',
  9. cls: 'home',// 添加了css class
  10. html: [
  11. '<img src="http://staging.sencha.com/img/sencha.png" />',
  12. '<h1>Welcome to Sencha Touch</h1>',
  13. "<p>You're creating the Getting Started app. This demonstrates how ",
  14. "to use tabs, lists and forms to create a simple app</p>",
  15. '<h2>Sencha Touch 2</h2>'
  16. ].join("")
  17. }
  18. ]
  19. });
  20. }
  21. });
launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            tabBarPosition: 'bottom',  // 将标签栏定位到底部

            items: [

                {

                    title: 'Home',

                    iconCls: 'home',

                    cls: 'home',// 添加了css class

                    html: [

                        '<img src="http://staging.sencha.com/img/sencha.png" />',

                        '<h1>Welcome to Sencha Touch</h1>',

                        "<p>You're creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app</p>",

                        '<h2>Sencha Touch 2</h2>'

                    ].join("")

                }

            ]

        });

    }

});

打开css/style.css文件，输入：

  1. .home {text-align:center;}
.home {text-align:center;}

然后，快快看看效果。

2.现在，让我们来建立第二个页面，blog页面。我们可以选择新建另一个js文件，然后修改app.html里面的引用；或者直接选择覆盖app.js：

  1. Ext.application({
  2. name: 'Sencha',
  3. launch: function() {
  4. Ext.create("Ext.tab.Panel", {
  5. fullscreen: true,
  6. tabBarPosition: 'bottom',
  7. items: [
  8. {
  9. xtype: 'nestedlist',// 这次建立一个嵌套列表（嵌套列表是什么，这里就不解释了）
  10. title: 'Blog',
  11. iconCls: 'star',
  12. displayField: 'title',
  13. store: {// 这里是建立一个存放数据的data store，以后将对data store进行详细介绍
  14. type: 'tree',
  15. fields: [
  16. 'title', 'link', 'author', 'contentSnippet', 'content',
  17. {name: 'leaf', defaultValue: true}
  18. ],
  19. root: {
  20. leaf: false
  21. },
  22. proxy: {// 我们使用ajax方式从google上获取一些blog的数据，通过jsonp作为传递的载体，所以要联网才能看到效果喔
  23. type: 'jsonp',
  24. url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
  25. reader: {// 这个是读取数据的reader，数据取回来后通过reader转成可被js认识的数据对象，我们要教会reader如何读
  26. type: 'json',// 因为返回来的数据是json，我们要定义一个json reader
  27. rootProperty: 'responseData.feed.entries'  // 将数据里面的entries节点当作根节点去读取数据
  28. }
  29. }
  30. },
  31. detailCard: {// 建立一个用于显示详细内容的panel
  32. xtype: 'panel',
  33. scrollable: true,
  34. styleHtmlContent: true
  35. },
  36. listeners: {// 这里是监听点击列表某一项后所执行的方法
  37. itemtap: function(nestedList, list, index, element, post) {
  38. this.getDetailCard().setHtml(post.get('content'));
  39. }
  40. }
  41. }
  42. ]
  43. });
  44. }
  45. });
Ext.application({

    name: 'Sencha',

    launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            tabBarPosition: 'bottom',

            items: [

                {

                    xtype: 'nestedlist',// 这次建立一个嵌套列表（嵌套列表是什么，这里就不解释了）

                    title: 'Blog',

                    iconCls: 'star',

                    displayField: 'title',

                    store: {// 这里是建立一个存放数据的data store，以后将对data store进行详细介绍

                        type: 'tree',

                        fields: [

                            'title', 'link', 'author', 'contentSnippet', 'content',

                            {name: 'leaf', defaultValue: true}

                        ],

                        root: {

                            leaf: false

                        },

                        proxy: {// 我们使用ajax方式从google上获取一些blog的数据，通过jsonp作为传递的载体，所以要联网才能看到效果喔

                            type: 'jsonp',

                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',

                            reader: {// 这个是读取数据的reader，数据取回来后通过reader转成可被js认识的数据对象，我们要教会reader如何读

                                type: 'json',// 因为返回来的数据是json，我们要定义一个json reader

                                rootProperty: 'responseData.feed.entries'  // 将数据里面的entries节点当作根节点去读取数据

                            }

                        }

                    },

                    detailCard: {// 建立一个用于显示详细内容的panel

                        xtype: 'panel',

                        scrollable: true,

                        styleHtmlContent: true

                    },

                    listeners: {// 这里是监听点击列表某一项后所执行的方法

                        itemtap: function(nestedList, list, index, element, post) {

                            this.getDetailCard().setHtml(post.get('content'));

                        }

                    }

                }

            ]

        });

    }

});

种完没？一起来看看效果：

点击每一项后可以切换到详细内容页面。

3.完成了上面的工作，我们再来建立一个页面，Contact页面。种子如下，拿去种码吧：

  1. Ext.application({
  2. name: 'Sencha',
  3. launch: function() {
  4. Ext.create("Ext.tab.Panel", {
  5. fullscreen: true,
  6. tabBarPosition: 'bottom',
  7. items: [
  8. {
  9. title: 'Contact',
  10. iconCls: 'user',
  11. xtype: 'formpanel',// 这次建立的是form panel
  12. url: 'contact.php',// 提交的action地址是contact.php。我们没有这个文件，所以，就不要提交了。
  13. layout: 'vbox',
  14. items: [// 这里，我们有两个成员
  15. {// 第一个成员是fieldset，将一些form元素包装起来。
  16. xtype: 'fieldset',
  17. title: 'Contact Us',
  18. instructions: '(email address is optional)',
  19. items: [
  20. {
  21. xtype: 'textfield',// input text
  22. label: 'Name'
  23. },
  24. {
  25. xtype: 'emailfield',// input email，html5添加进来的新成员
  26. label: 'Email'
  27. },
  28. {
  29. xtype: 'textareafield',// textarea
  30. label: 'Message'
  31. }
  32. ]
  33. },
  34. {// 第二个成员，按钮
  35. xtype: 'button',
  36. text: 'Send',
  37. ui: 'confirm',
  38. handler: function() {
  39. this.up('formpanel').submit();// 处理点击事件的方法
  40. }
  41. }
  42. ]
  43. }
  44. ]
  45. });
  46. }
  47. });
Ext.application({

    name: 'Sencha',

    launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            tabBarPosition: 'bottom',

            items: [

                {

                    title: 'Contact',

                    iconCls: 'user',

                    xtype: 'formpanel',// 这次建立的是form panel

                    url: 'contact.php',// 提交的action地址是contact.php。我们没有这个文件，所以，就不要提交了。

                    layout: 'vbox',

                    items: [// 这里，我们有两个成员

                        {// 第一个成员是fieldset，将一些form元素包装起来。

                            xtype: 'fieldset',

                            title: 'Contact Us',

                            instructions: '(email address is optional)',

                            items: [

                                {

                                    xtype: 'textfield',// input text

                                    label: 'Name'

                                },

                                {

                                    xtype: 'emailfield',// input email，html5添加进来的新成员

                                    label: 'Email'

                                },

                                {

                                    xtype: 'textareafield',// textarea

                                    label: 'Message'

                                }

                            ]

                        },

                        {// 第二个成员，按钮

                            xtype: 'button',

                            text: 'Send',

                            ui: 'confirm',

                            handler: function() {

                                this.up('formpanel').submit();// 处理点击事件的方法

                            }

                        }

                    ]

                }

            ]

        });

    }

});

然后，上图看真相：

4.合并。

三个栏目四个页面大家都建立过了，也体验过效果。可是，我们不是做一个app吗？这样怎么算一个。好了，现在我们将它们合并起来。

  1. Ext.application({
  2. name: 'Sencha',
  3. launch: function() {
  4. Ext.create("Ext.tab.Panel", {
  5. fullscreen: true,
  6. tabBarPosition: 'bottom',
  7. items: [// 这次，我们将三个栏目当成三个Tab Panel的成员
  8. {// 第一个成员，home页面
  9. title: 'Home',
  10. iconCls: 'home',
  11. cls: 'home',
  12. html: [
  13. '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
  14. '<h1>Welcome to Sencha Touch</h1>',
  15. "<p>You're creating the Getting Started app. This demonstrates how ",
  16. "to use tabs, lists and forms to create a simple app</p>",
  17. '<h2>Sencha Touch 2</h2>'
  18. ].join("")
  19. },
  20. {// 第二个成员，blog页面
  21. xtype: 'nestedlist',
  22. title: 'Blog',
  23. iconCls: 'star',
  24. displayField: 'title',
  25. store: {
  26. type: 'tree',
  27. fields: [
  28. 'title', 'link', 'author', 'contentSnippet', 'content',
  29. {name: 'leaf', defaultValue: true}
  30. ],
  31. root: {
  32. leaf: false
  33. },
  34. proxy: {
  35. type: 'jsonp',
  36. url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
  37. reader: {
  38. type: 'json',
  39. rootProperty: 'responseData.feed.entries'
  40. }
  41. }
  42. },
  43. detailCard: {
  44. xtype: 'panel',
  45. scrollable: true,
  46. styleHtmlContent: true
  47. },
  48. listeners: {
  49. itemtap: function(nestedList, list, index, element, post) {
  50. this.getDetailCard().setHtml(post.get('content'));
  51. }
  52. }
  53. },
  54. {// 第三个成员，Contact页面
  55. title: 'Contact',
  56. iconCls: 'user',
  57. xtype: 'formpanel',
  58. url: 'contact.php',
  59. layout: 'vbox',
  60. items: [
  61. {
  62. xtype: 'fieldset',
  63. title: 'Contact Us',
  64. instructions: '(email address is optional)',
  65. items: [
  66. {
  67. xtype: 'textfield',
  68. label: 'Name'
  69. },
  70. {
  71. xtype: 'emailfield',
  72. label: 'Email'
  73. },
  74. {
  75. xtype: 'textareafield',
  76. label: 'Message'
  77. }
  78. ]
  79. },
  80. {
  81. xtype: 'button',
  82. text: 'Send',
  83. ui: 'confirm',
  84. handler: function() {
  85. this.up('formpanel').submit();
  86. }
  87. }
  88. ]
  89. }
  90. ]
  91. });
  92. }
  93. });
Ext.application({

    name: 'Sencha',

    launch: function() {

        Ext.create("Ext.tab.Panel", {

            fullscreen: true,

            tabBarPosition: 'bottom',

            items: [// 这次，我们将三个栏目当成三个Tab Panel的成员

                {// 第一个成员，home页面

                    title: 'Home',

                    iconCls: 'home',

                    cls: 'home',

                    html: [

                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',

                        '<h1>Welcome to Sencha Touch</h1>',

                        "<p>You're creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app</p>",

                        '<h2>Sencha Touch 2</h2>'

                    ].join("")

                },

                {// 第二个成员，blog页面

                    xtype: 'nestedlist',

                    title: 'Blog',

                    iconCls: 'star',

                    displayField: 'title',

                    store: {

                        type: 'tree',

                        fields: [

                            'title', 'link', 'author', 'contentSnippet', 'content',

                            {name: 'leaf', defaultValue: true}

                        ],

                        root: {

                            leaf: false

                        },

                        proxy: {

                            type: 'jsonp',

                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',

                            reader: {

                                type: 'json',

                                rootProperty: 'responseData.feed.entries'

                            }

                        }

                    },

                    detailCard: {

                        xtype: 'panel',

                        scrollable: true,

                        styleHtmlContent: true

                    },

                    listeners: {

                        itemtap: function(nestedList, list, index, element, post) {

                            this.getDetailCard().setHtml(post.get('content'));

                        }

                    }

                },

                {// 第三个成员，Contact页面

                    title: 'Contact',

                    iconCls: 'user',

                    xtype: 'formpanel',

                    url: 'contact.php',

                    layout: 'vbox',

                    items: [

                        {

                            xtype: 'fieldset',

                            title: 'Contact Us',

                            instructions: '(email address is optional)',

                            items: [

                                {

                                    xtype: 'textfield',

                                    label: 'Name'

                                },

                                {

                                    xtype: 'emailfield',

                                    label: 'Email'

                                },

                                {

                                    xtype: 'textareafield',

                                    label: 'Message'

                                }

                            ]

                        },

                        {

                            xtype: 'button',

                            text: 'Send',

                            ui: 'confirm',

                            handler: function() {

                                this.up('formpanel').submit();

                            }

                        }

                    ]

                }

            ]

        });

    }

});

赶快把程序跑起来，查看一下图果吧。看是不是和下图一样？

这样，我们很快就建立了一个基于HTML5的 Web App了。是不是很简单？我们甚至可以用PhoneGap将它打包成 android或者iOS应用，发布到各自的应用商店去。至于PhoneGap，不在我们的讨论范围，在这里就不再详谈了。这次就介绍到这里。之后，我会给大家介绍Sencha Touch 2的详细内容。

建立第一个Sencha Touch应用的更多相关文章

  1. sencha touch建立新项目

    首先你得有一个sencha touch的环境,如下图: 图1 touch的sdk环境 有了这个之后,通过在cmd中执行下列命令: sencha -sdk /path/to/framework gene ...

  2. 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  3. Android环境配置Sencha Touch

    转自http://www.phonegap100.com/portal.php?mod=view&aid=19 作为你开发的一部分,为安卓设备开发的 Sencha Touch框架应该在安卓虚拟 ...

  4. 用 Sencha Touch 构建移动 web 应用程序

    Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载 ...

  5. sencha touch打包成安装程序

    为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...

  6. sencha touch 入门系列 （二）sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  7. sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  8. sencha touch tabsidebar 源码扩展

    先上图看效果 没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的. 插件js下载地址:http://www.m ...

  9. 【翻译】在Sencha Touch中创建离线/在线代理

    原文:Creating an Online/Offline proxy in Sencha Touch 概述 在Sencha Touch中,一个常见的需求就是,当设备在没有连接互联网的时候,应用程序必 ...

随机推荐

  1. AtCoder Regular Contest 091

    数学场,做到怀疑人生系列 C - Flip,Flip, and Flip...... Time limit : 2sec / Memory limit : 256MB Score : 300 poin ...

  2. MySQL可供选择的存储引擎

    备注:以下关于5.7版本的内容是来源于官方文档:https://dev.mysql.com/doc/refman/5.7/en/storage-engines.html 以下关于5.6版本的内容,一部 ...

  3. docker 容器详解

    Docker 是一个开源的应用容器引擎,基于Go语言 并遵Apache2.0协议开源,也是一种虚拟化技术.让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux ...

  4. UVa1476 Error Curves

    画出函数图像后,发现是一个类似V字型的图. 可以用三分法找图像最低点 WA了一串,之后发现是读入优化迷之被卡. /*by SilverN*/ #include<iostream> #inc ...

  5. canvas绘制视频封面--摘抄

    一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: <!DOCTYPE html ...

  6. 标准C程序设计七---62

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  7. 最全py2exe

    这次不是直接讲解下去,而是谈一下如何把我们写的游戏做成一个exe文件,这样一来,用户不需要安装python就可以玩了.扫清了游戏发布一大障碍啊! perl,python,java等编程语言,非常好用, ...

  8. 如何在官网上下载Linux版本的MySQL安装包

    如何在官网上下载Linux版本的MySQL安装包 参考百度经验,<如何在官网上下载Linux版本的MySQL安装包> 原文链接:https://jingyan.baidu.com/arti ...

  9. Sublime Text 新文本编辑器（txt3）

    http://www.sublimetext.com/

  10. hdu 5400(思路题)

    Arithmetic Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...