碼上歡樂
相關內容    簡體    繁體

建立第一個Sencha Touch應用

本文轉載自   查看原文   2014-08-24 11:28   2737    WebApp

准備

開始開發前，請先到下面的地址下載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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  1. .home {text-align:center;}  
.home {text-align:center;}


然后，快快看看效果。

 

 

2.現在，讓我們來建立第二個頁面，blog頁面。我們可以選擇新建另一個js文件，然后修改app.html里面的引用；或者直接選擇覆蓋app.js：

 

[javascript] view plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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的詳細內容。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Coherence Step by Step 第一篇 入門（四） 建立第一個Coherence應用（翻譯） 一、搭建Django，建立第一個demo 建立你的第一個 Git 倉庫 第一個Ionic應用 Emberjs——第一個應用 flink第一個應用 IOS編程淺藍教程(二) HelloWrld! 建立你的第一個iPhone應用程序 Sencha Touch 2 官方文檔翻譯之 Intro to Applications with Sencha Touch 2（ST2應用程序簡介） 第一個WPF應用程序 HarmonyOS基礎-第一個應用總結
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM