目前，移動應用開發如火如荼，比如Android、iOS開發的應用已越來越多。開發者在開發這些基于不同操作平臺上的無線應用時，都面臨要熟悉所用平臺的技術知識的挑戰。因此，目前有不少基于HTML 5標準的跨移動開發框架出現，開發者只需要掌握HTML 5，CSS及Javascript及相關框架的開發技巧就可以了。

在Sencha Touch的項目下載地址里，我們可以下載其中的***版本。本系列教程將分四篇，將講解如何使用Sencha Touch設計一個記事本小應用，用戶可以在上面簡單記錄便條筆記，并將其保存在移動設備中。

應用示意圖

系統的主要功能有：

1) 新建記事內容

2) 編輯記事內容

3) 刪除記事內容

4) 在移動設備應用中保存記事的內容。

本系列的教程，希望讀者具有一定的EXT JS框架的開發基礎知識為佳。在***講中，先講解如何對應用進行框架的設計。

設計主頁面

首先，我們先來看如何設計用戶用于創建和編輯記事的表單，可以大概設計成如下的樣子：

可以看到，這個頁面中，有保存按鈕，以及一個刪除按鈕(一個垃圾圖標)，對應到Sencha Touch框架中的元素如下圖所示：

接下來是記事列表的界面，框圖如下：

其對應Sencha Touch中的框架元素如下：

此外,還需要使用一個布局文件,它是溝通記事列表頁面和記事頁面登記的橋梁,這里我們使用EXT的card layout布局進行布局,兩個界面的關系如下圖:

#p#

構建程序基本結構

首先,在程序中的結構如下圖所示,其中有三個主要的文件:index.html,app.js和app.cs。

在index.html中，主要功能是啟動整個應用程序并且引用相關的類庫，如下代碼：

<script class="hiddenSpellError"></script> 
<script src=”senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" /> 
<link href="app.css" rel="stylesheet" type="text/css" /> 
<script src="app.js" type="text/javascript"></script> 

這里,首先引入了sencha touch本身的類庫JS代碼,然后再引入app.css和app.js兩個文件,其中app.css為樣式文件,app.js文件為程序的核心功能JS文件。

下面我們介紹app.js中的具體代碼，首先是在app.js中進行初始化：

var App = new Ext.Application({ 
    name : 'NotesApp', 
    useLoadMask : true, 
    launch : function () { 
 
    } 
}) 

其中，Ext.Application的實例的初始化，意味者一個sencha touch應用的建立，具體的可以參考(http://dev.sencha.com/deploy/touch/docs/?class=Ext.Application)中對該類的說明，這個類的實例化后，會自動創建一個全局的變量NotesApp,并且同時建立了如下的命名空間：

◆NotesApp

◆NotesApp.views、

◆NotesApp.controllers

◆NotesApp.models

◆NotesApp.stores

而launch的方法只會運行一次，在這里可以創建應用程序的viewport界面視圖，代碼如下：

launch: function () { 
 
    NotesApp.views.viewport = new Ext.Panel({ 
        fullscreen: true, 
        html:'This is the viewport' 
    }); 
} 

我們將整個界面布局設置為使用Panel面板，并且設置了fullscreen屬性為true,同時也會設置monitorOrientation屬性的值為true，這個是很有用的一個屬性，因為它可以讓panel面板監聽屏幕方向發生變化時候的事件。當我們運行后，顯示如下的界面：

#p#

創建記事列表界面

當我們的這個應用一啟動后，首先顯示的是記事列表頁面，其中頁面結構如下圖：

可以看到，是在一個pannel面版中，存在一個list列表控件和一個toolbar工具條列表。下面是pannel的代碼：

NotesApp.views.notesListContainer = new Ext.Panel({ 
    id : 'notesListContainer', 
    layout : 'fit', 
    html: 'This is the notes list container' 
}); 

此時，我們結合之前的代碼，看下目前的代碼應該是如下的樣子：

var App = new Ext.Application({ 
    name: 'NotesApp', 
    useLoadMask: true, 
    launch: function () { 
 
        NotesApp.views.notesListContainer = new Ext.Panel({ 
            id : 'notesListContainer', 
            layout : 'fit', 
            html: 'This is the notes list container' 
        }); 
 
        NotesApp.views.viewport = new Ext.Panel({ 
            fullscreen : true, 
            layout : 'card', 
            cardAnimation : 'slide', 
            items: [NotesApp.views.notesListContainer] 
        }); 
    } 
}) 

可以看到，在viewport中的items屬性，我們將新的這個panel加入進去了。

并且請注意cardAnimation中，說明了面板的使用效果是slide的動畫展現效果。在模擬器中運行后，會看到如下圖的效果：

接下來，我們再為其增加工具條，代碼如下：

NotesApp.views.notesListToolbar = new Ext.Toolbar({ 
 
　　id: 'notesListToolbar', 
 
　　title: 'My Notes' 
 
　　}); 

將工具條粘附到記事列表的面板中是很簡單的，只需要dockedItems 屬性即可：

NotesApp.views.notesListContainer = new Ext.Panel({ 
 
　　id: 'notesListContainer', 
 
　　layout: 'fit', 
 
　　html: 'This is the notes list container', 
 
　　dockedItems: [NotesApp.views.notesListToolbar] 
 
　　}); 

下圖就是添加工具條后的運行效果：

到目前為止，本講的內容結束，主要是講解了如何架構應用的流程和頁面，并給出了啟動界面中的記事列表的界面設計原型，目前的完整代碼如下：

var App = new Ext.Application({ 
    name: 'NotesApp', 
    useLoadMask: true, 
    launch: function () { 
 
        NotesApp.views.notesListToolbar = new Ext.Toolbar({ 
            id: 'notesListToolbar', 
            title: 'My Notes' 
        }); 
 
        NotesApp.views.notesListContainer = new Ext.Panel({ 
            id: 'notesListContainer', 
            layout: 'fit', 
            html: 'This is the notes list container', 
            dockedItems: [NotesApp.views.notesListToolbar] 
        }); 
 
        NotesApp.views.viewport = new Ext.Panel({ 
            fullscreen: true, 
            layout: 'card', 
            cardAnimation: 'slide', 
            items: [NotesApp.views.notesListContainer] 
        }); 
    } 
}) 

在《Sencha Touch開發實例：記事本應用(二)》中，我們將繼續學習，如何實現新建立和編輯記事的功能。