zoukankan      html  css  js  c++  java

  • 建立第一个Sencha Touch应用

    准备

    开始开发前，请先到下面的地址下载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文件中，如下：

    [html] view plaincopyprint?
    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里种入如下代码：

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

    launch: function() {// 应用启动时执行该方法
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});



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

     

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

     

    [javascript] view plaincopyprint?
    1. launch: function() {  
    2.         Ext.create("Ext.tab.Panel", {  
    3.             fullscreen: true,  
    4.             tabBarPosition: 'bottom',  // 将标签栏定位到底部   
    5.   
    6.             items: [  
    7.                 {  
    8.                     title: 'Home',  
    9.                     iconCls: 'home',  
    10.                     cls: 'home',// 添加了css class   
    11.   
    12.                     html: [  
    13.                         '<img 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.             ]  
    21.         });  
    22.     }  
    23. });  
    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文件，输入：

     

    [CSS] view plaincopyprint?
    1. .home {text-align:center;}  
    .home {text-align:center;}


    然后，快快看看效果。

     

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

     

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

     

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

     

    [javascript] view plaincopyprint?
    1. Ext.application({  
    2.     name: 'Sencha',  
    3.   
    4.     launch: function() {  
    5.         Ext.create("Ext.tab.Panel", {  
    6.             fullscreen: true,  
    7.             tabBarPosition: 'bottom',  
    8.   
    9.             items: [// 这次，我们将三个栏目当成三个Tab Panel的成员   
    10.                 {// 第一个成员，home页面   
    11.                     title: 'Home',  
    12.                     iconCls: 'home',  
    13.                     cls: 'home',  
    14.                     html: [  
    15.                         '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',  
    16.                         '<h1>Welcome to Sencha Touch</h1>',  
    17.                         "<p>You're creating the Getting Started app. This demonstrates how ",  
    18.                         "to use tabs, lists and forms to create a simple app</p>",  
    19.                         '<h2>Sencha Touch 2</h2>'  
    20.                     ].join("")  
    21.                 },  
    22.                 {// 第二个成员，blog页面   
    23.                     xtype: 'nestedlist',  
    24.                     title: 'Blog',  
    25.                     iconCls: 'star',  
    26.                     displayField: 'title',  
    27.   
    28.                     store: {  
    29.                         type: 'tree',  
    30.   
    31.                         fields: [  
    32.                             'title', 'link', 'author', 'contentSnippet', 'content',  
    33.                             {name: 'leaf', defaultValue: true}  
    34.                         ],  
    35.   
    36.                         root: {  
    37.                             leaf: false  
    38.                         },  
    39.   
    40.                         proxy: {  
    41.                             type: 'jsonp',  
    42.                             url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',  
    43.                             reader: {  
    44.                                 type: 'json',  
    45.                                 rootProperty: 'responseData.feed.entries'  
    46.                             }  
    47.                         }  
    48.                     },  
    49.   
    50.                     detailCard: {  
    51.                         xtype: 'panel',  
    52.                         scrollable: true,  
    53.                         styleHtmlContent: true  
    54.                     },  
    55.   
    56.                     listeners: {  
    57.                         itemtap: function(nestedList, list, index, element, post) {  
    58.                             this.getDetailCard().setHtml(post.get('content'));  
    59.                         }  
    60.                     }  
    61.                 },  
    62.                 {// 第三个成员，Contact页面   
    63.                     title: 'Contact',  
    64.                     iconCls: 'user',  
    65.                     xtype: 'formpanel',  
    66.                     url: 'contact.php',  
    67.                     layout: 'vbox',  
    68.   
    69.                     items: [  
    70.                         {  
    71.                             xtype: 'fieldset',  
    72.                             title: 'Contact Us',  
    73.                             instructions: '(email address is optional)',  
    74.                             items: [  
    75.                                 {  
    76.                                     xtype: 'textfield',  
    77.                                     label: 'Name'  
    78.                                 },  
    79.                                 {  
    80.                                     xtype: 'emailfield',  
    81.                                     label: 'Email'  
    82.                                 },  
    83.                                 {  
    84.                                     xtype: 'textareafield',  
    85.                                     label: 'Message'  
    86.                                 }  
    87.                             ]  
    88.                         },  
    89.                         {  
    90.                             xtype: 'button',  
    91.                             text: 'Send',  
    92.                             ui: 'confirm',  
    93.                             handler: function() {  
    94.                                 this.up('formpanel').submit();  
    95.                             }  
    96.                         }  
    97.                     ]  
    98.                 }  
    99.             ]  
    100.         });  
    101.     }  
    102. });  
    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的详细内容。
  • 相关阅读:
    vue-cli生成的重要代码详解
    vuex初探
    vue-router笔记
    新技术的学习
    图片优化方法（有时间看看）
    关于老教授之家项目的思考 && 中国互联网+大赛培训
    If you are tired...
    微信公众平台开发初探
    winscp介绍与使用
    获取当前服务器信息
  • 原文地址：https://www.cnblogs.com/amylis_chen/p/3932621.html
Copyright © 2011-2022 走看看