最輕鬆的手機特效開發方式 - Sencha Touch

前言

Sencha Touch 目前的市面上中文版的書不多，但同樣也是行動開發框架的jQuery Mobile 有好幾本。不知道是推廣問題，還是知名度Ext JS 較大，在國外比較熱的Sencha Touch 框架，在國內居然比較冷門。或許是中文資料的匱乏，也是一個原因吧。因而，本書希望能增加大家對Sencha Touch 的了解，深入學習如何使用Sencha Touch 進行開發。

Sencha Touch 其實是與Ext JS 同架構的框架，會使用Ext JS 進行開發，基本上就可以使用Sencha Touch 進行開發。作為一名Ext JS 開發人員，學習使用SenchaTouch 的開發，可算得是錦上添花。尤其是在目前行動應用程式開發比較熱門的情況下，擁有這樣的技能，也是進入行動開發領域不錯的選擇。

希望本書能作為一本拋磚引玉的書，為開發行動領域的應用程式提供一把鑰匙。

本書的開發環境

本書的開發環境主要包含以下幾點：

◎作業系統：Window 7

◎ Web 伺服器：Window 7 附帶的IIS

◎ 開發工具：UltraEdit

◎ 瀏覽器：Chorme 27.0.1453.116 m

為了能不受系統本身環境的影響，在使用Sencha Cmd 和Android 虛擬機器的時候，專門使用虛擬機器架設了一個乾淨的Window 7 系統進行安裝和使用。如果在本機安裝和使用Sencha Cmd 和Android 虛擬機器碰到處理不了的錯誤的時候，建議也使用虛擬機器架設一個乾淨的Window 7 系統再進行安裝和使用，以避免本身環境的影響。

本書針對的讀者

本書主要是以範例的形式來介紹Sencha Touch 的開發過程和元件的使用方法，實用性比較強，適合希望立刻就能上手使用Sencha Touch 進行開發的讀者。對已經熟悉Sencha Touch 開發的老手來說，本書更可作為參考。

如何閱讀本書

這是一本實戰性很強的書，在閱讀的時候，希望讀者能架設好對應的平台，邊閱讀邊實作，在完成本書閱讀的同時，也親身體驗一下Sencha Touch 的開發過程。

聯繫作者

希望本書能為每位讀者帶來幫助，如果對本書有任何意見和建議，或有任何技術上的問題，請與筆者聯繫。筆者非常希望獲得大家的意見和建議以加強創作功力，非常樂意和大家一起探討和分享有關Sencha Touch 開發上的問題，甚至更廣泛的Web 開發問題。如果想聯繫筆者，請發郵件到huangdengqiao@outlook.com，或發訊息到微博http://weibo.com/gerneal。如果想了解最新的Ext JS 和SenchaTouch 動態， 可造訪筆者的部落格http://blog.csdn.net/tianxiaode 或http://dqhuang.blog.51cto.com/。

前言

Sencha Touch 目前的市面上中文版的書不多，但同樣也是行動開發框架的jQuery Mobile 有好幾本。不知道是推廣問題，還是知名度Ext JS 較大，在國外比較熱的Sencha Touch 框架，在國內居然比較冷門。或許是中文資料的匱乏，也是一個原因吧。因而，本書希望能增加大家對Sencha Touch 的了解，深入學習如何使用Sencha Touch 進行開發。

Sencha Touch 其實是與Ext JS 同架構的框架，會使用Ext JS 進行開發，基本上就可以使用Sencha Touch 進行開發。作為一名Ext JS 開發人員，學習使用SenchaTouch 的開發，可算得是錦上添花。尤其是在目...

前言
Chapter 01 Sencha Touch 概述
1.1 Sencha Touch 簡介
1.1.1 發展歷史
1.1.2 下載網址
1.1.3 關於授權合約
1.1.4 Sencha Touch 套件的內容
1.2 API 文件
1.2.1 使用線上API 文件
1.2.2 使用本機API 文件
1.3 本書的一些術語
1.4 一些常見的設定項目
1.5 類別的命名規則
1.6 JSON
1.7 關於偵錯
1.8 小結
Chapter 02 MVC 模式
2.1 MVC 模式概述
2.2 元件查詢的機制
2.2.1 元件管理員：Ext.ComponentManager
2.2.2 元件的查詢方式
2.2.3 直接使用id 查詢元件
2.2.4 元件中的查詢
2.3 控制器
2.3.1 模型（models）
2.3.2 stores
2.3.3 視圖（views）
2.3.4 參考（refs）
2.3.5 控制（control）
2.3.6 路由（routes）
2.3.7 init 方法
2.3.8 launch 方法
2.4 小結
Chapter 03 第一個應用程式
3.1 Sencha Cmd v3
3.1.1 下載
3.1.2 安裝
3.1.3 使用Sencha Cmd 來產生第一個應用程式
3.2 FirstApp 應用程式
3.2.1 目錄結構
3.2.2 首頁（index.html）
3.2.3 設定檔：app.json
3.2.4 應用程式開機檔案：app.js
3.2.5 Ext.viewsport 物件
3.2.6 樣式檔案：app.css
3.3 存在的問題
3.4 效果測試
3.5 應用程式的產生
3.6 包裝應用程式
3.6.1 包裝設定檔：packager.json
3.6.2 包裝
3.7 小結
Chapter 04 主介面與版面配置
4.1 第一個應用程式的主介面與
版面配置
4.2 版面配置
4.2.1 卡片版面配置：Ext.layout.Card
4.2.2 停靠版面配置：Ext.layout.wrapper.BoxDock、Ext.layout.
wrapper.Dock
4.2.3 自我調整版面配置：Ext.layout.Fit
4.2.4 盒子版面配置：
Ext.layout.HBox、Ext.layout.VBox
4.3 介面版面配置中常用的元件
4.3.1 容器：Ext.Container
4.3.2 標題列：Ext.TitleBar
4.3.3 分段按鈕：Ext.SegmentedButton
4.3.4 導覽視圖：Ext.navigation. viewsviews
4.3.5 標籤面板：Ext.tab.Panel
4.3.6 滑動視圖：Ext.carousel.Carousel
4.4 小結
Chapter 05 資料層
5.1 概述
5.2 Ext.Ajax
5.3 跨域問題
5.4 建立模型
5.4.1 欄位：Ext.data.Field
5.4.2 定義id 值
5.4.3 可以自動產生id 的類別
5.4.4 增加驗證：Ext.data.validations
5.4.5 模型之間的關係
5.5 代理
5.5.1 Ext.data.reader.Reader
5.5.2 Ext.data.writer.Writer
5.5.3 擴充代理以實現格式化、標準化、統一化
5.6 store
5.6.1 建立store
5.6.2 載入本機資料
5.6.3 資料操作
5.6.4 自動同步
5.6.5 排序
5.6.6 中文排序的問題
5.6.7 過濾
5.6.8 分組
5.6.9 分頁
5.6.10 樹狀資料
5.7 小結
Chapter 06 範本與資料視圖
6.1 基本範本：Ext.Template
6.2 進階範本：Ext.XTemplate
6.2.1 自動填充功能
6.2.2 使用判斷敘述
6.2.3 使用子範本
6.3 資料視圖：Ext.dataview.Dataviews
6.3.1 基本的資料視圖使用
6.3.2 多選模式
6.3.3 帶元件的資料視圖
6.4 選擇器：Ext.picker.Picker
6.4.1 基本用法
6.4.2 沒有工具列的選取效果
6.4.3 多插槽的選擇器
6.5 列表：Ext.dataview.List
6.5.1 基本用法
6.5.2 分組的列表
6.5.3 使用索引條的清單
6.5.4 具有Disclosure 功能的列表
6.5.5 翻頁外掛程式：Ext.plugin.ListPaging
6.6 巢狀結構列表：Ext.dataview.NestedList
6.7 小結
Chapter 07 表單
7.1 表單面板
7.1.1 setValues 和getValues方法
7.1.2 setRecord、updateRecord和getRecord 方法
7.1.3 表單的傳送
7.2 在表單內對元素進行分組：Ext.form.FieldSet
7.3 表單欄位
7.3.1 文字欄位：Ext.field.Text
7.3.2 數字欄位：Ext.field.Number
7.3.3 多行文字欄位：Ext.field.TextArea
7.3.4 隱藏欄位：Ext.field.Hidden
7.3.5 密碼欄位：Ext.field.Password
7.3.6 電子郵件欄位：Ext.field.Email
7.3.7 網址欄位：Ext.field.Url
7.3.8 搜索欄位：Ext.field.Search
7.3.9 複選欄位：Ext.field.Checkbox
7.3.10 單選欄位：Ext.field.Radio
7.3.11 微調欄位：Ext.field.Spinner
7.3.12 滑桿欄位：Ext.field.Slider
7.3.13 切換欄位：Ext.field.Toggle7.3.14 日期選擇欄位：Ext.field.DatePicker
7.3.15 選擇欄位：Ext.field.Select
7.4 記事本
7.5 小結
Chapter 08 其他的一些常用元件
8.1 面板：Ext.Panel
8.2 工具列：Ext.Toolbar
8.2.1 按鈕：Ext.Button
8.2.2 在工具列的元件之間設定空白間隔：Ext.Spacer
8.3 資訊視窗：Ext.MessageBox
8.4 操作列表：Ext.ActionSheet
8.5 圖片：Ext.Img
8.6 動畫功能：Ext.Anim
8.7小結
Chapter 09 音訊和視訊
9.1 音訊：Ext.Audio
9.2 視訊：Ext.Video
9.3 「我的音樂」播放機
9.3.1 前期工作
9.3.2 建立模型和store
9.3.3 設計主介面
9.3.4 「歌手」標籤頁
9.3.5 分類標籤頁
9.3.6 播放清單標籤頁
9.3.7 播放標籤頁
9.4 小結
Chapter10 原生API
10.1 原生API 概述
10.2 取得裝置連接資訊和裝置資訊
10.3 使用通知
10.4 取得通訊錄
10.5 SQLite
10.6 相機功能
10.6.1 基本用法
10.6.2 上傳圖片
10.7 取得地理位置
10.8 取得方向變化
10.9 小結
Chapter 11 地圖
11.1 建立應用程式
11.2 基本設定
11.3 地圖的設定
11.4 定位
11.5 搜索地點功能
11.6 更多的功能
11.7 小結
Chapter 12 多設定的應用程式
12.1 基本流程
12.2 定義設定檔
12.3 配製Phone 介面
12.4 設定Tablet 主介面
12.5 完成新增功能
12.6 編輯和刪除功能
12.7 小結
Chapter 13 綜合應用——建立「我的商店」應用程式
13.1 京東商場的主要介面
13.2 建立應用程式
13.3 主介面
13.4 首頁標籤頁
13.4.1 滑動視圖第一頁
13.4.2 產品列表視圖
13.4.3 產品資訊視圖
13.4.4 掌上秒殺列表
13.4.5 功能按鈕
13.4.6 搜索按鈕
13.4.7 「逛」功能
13.4.8 滑動視圖第二頁
13.5 搜索標籤頁
13.6 分類標籤頁
13.7 購物車
13.8 「我的商店」標籤頁
13.9 「更多」標籤頁
13.10 小結

前言
Chapter 01 Sencha Touch 概述
1.1 Sencha Touch 簡介
1.1.1 發展歷史
1.1.2 下載網址
1.1.3 關於授權合約
1.1.4 Sencha Touch 套件的內容
1.2 API 文件
1.2.1 使用線上API 文件
1.2.2 使用本機API 文件
1.3 本書的一些術語
1.4 一些常見的設定項目
1.5 類別的命名規則
1.6 JSON
1.7 關於偵錯
1.8 小結
Chapter 02 MVC 模式
2.1 MVC 模式概述
2.2 元件查詢的機制
2.2.1 元件管理員：Ext.ComponentManager
2.2.2 元件的查詢方式
2.2.3 直接使用id 查詢元件
2.2.4 元件中的查詢
...