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的详细内容。
  • 相关阅读:
    【第40套模拟题】【noip2011_mayan】解题报告【map】【数论】【dfs】
    【模拟题(63550802...)】解题报告【贪心】【拓扑排序】【找规律】【树相关】
    【模拟题(电子科大MaxKU)】解题报告【树形问题】【矩阵乘法】【快速幂】【数论】
    IMemoryBufferReference and IMemoryBufferByteAccess
    SoftwareBitmap and BitmapEncoder in Windows.Graphics.Imaging Namespace
    Windows UPnP APIs
    编译Android技术总结
    Windows函数转发器
    Two Ways in Delphi to Get IP Address on Android
    Delphi Call getifaddrs and freeifaddrs on Android
  • 原文地址：https://www.cnblogs.com/amylis_chen/p/3932621.html
Copyright © 2011-2022 走看看