這陣子在進行一個 mobile web 開發專案；我們對 Ext JS 還算熟悉，故選擇採用同公司的產品：Sencha Touch。
我們沒使用過，決定先進行 prototyping，看能挖出多少可用、好用的元件。
目前第一版趨近完成，我先寫篇心得分享，順道幫自己留個筆記；請路過看到的前輩、高手們不吝給予指教啦～ 
目前是 2014 年 3 月初，已釋出的 Sencha Touch 最新 GPL 版本是 2.3.1，但堪用的是 2.1.1。
Sencha Touch 僅支援 WebKit based 網頁瀏覽器，大致上就是這些。
我們遭遇到最詭異的就是 Ext.field.DatePicker 元件；在 2.3.1 版，Android device 的 Chrome、Opera、系統內建瀏覽器，以及 iOS devices 的 Safari，點選日期文字後應呈現的日期滾輪都會消失。
 |  |
| Chrome on Android | Opera on Android |
改用 Gecko-based 的 Firefox 瀏覽網頁，滾輪反而跑出來了… 
但元件的外觀的確與 WebKit-based 的瀏覽器不太一樣。
用電腦版的 Chrome 開啟 Sencha Touch 2.3.1 的 Ext.field.DatePicker 文件頁面，頁面內的 Live Preview 完全看不見元件蹤影；我們進行降版測試，歷經 2.3.0、2.2.1、2.2.0，直到 2.1.1 才得到可用的元件，用電腦版的 Chrome 開啟 Sencha Touch 2.1.1 的 Ext.field.DatePicker 文件頁面也的確可以在 Live Preview 看到元件。
附帶一提，目前該元件仍無法透過元件初始設定變更滾輪的內容，月份滾輪只有 January、February、… 可用。
繼詭異的 Ext.field.DatePicker 之後，我們發現… 沒有挑選時間用的滾輪元件（TimePicker？）。 
後來我們用 Ext.field.Text 與 Ext.picker.Picker 組出挑選時間用的滾輪元件。
看到這裡，可能有人會覺得「既然 Ext.field.DatePicker 很詭異，那也自己組就好」… 這我們也想過，但官方提供的 Ext.field.DatePicker 把每個月的最後一天處理的很好（沒有 2/30、4/31、… 這種組合可以選），可以省去很多麻煩事。 
另外，Ext.Msg 也是頗有問題。執行以下語法呈現的訊息視窗，再度呼叫時，視窗內的文字會完全消失：
- Ext.Msg.alert(‘Title’, ‘Content’, Ext.emptyFn);
- Ext.Msg.prompt(‘Title’, ‘Question:’, function(text) { /* … */ });
- Ext.Msg.confirm(‘Title’, ‘Question’, Ext.emptyFn);
最後我們選擇使用 Ext.MessageBox 處理：
var confirmBox = Ext.create('Ext.MessageBox', {
title: 'Title',
html: 'Question',
buttons: [{
itemId: 'cancel',
text: 'Cancel',
handler: function() {
confirmBox.hide();
}
},{
itemId: 'ok',
text: 'Send',
ui: 'action',
handler: function() {
confirmBox.hide();
}
}]
});
confirmBox.show();
以上大概就是我們目前遭遇的問題與解決方式，以後踩到新地雷再撰文補上。 