Sencha Touch 使用心得

這陣子在進行一個 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();

以上大概就是我們目前遭遇的問題與解決方式，以後踩到新地雷再撰文補上。