Sencha Touch開發執行個體：記事本應用(一)(1)

目前，行動裝置 App開發如火如荼，比如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布局進行布局,兩個介面的關係如: