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,點選日期文字後應呈現的日期滾輪都會消失。

Sencha Touch 2.3.1 : Ext.field.DatePicker in ChromeSencha Touch 2.3.1 : Ext.field.DatePicker in Opera
Chrome on AndroidOpera on Android

改用 Gecko-based 的 Firefox 瀏覽網頁,滾輪反而跑出來了… :-|
Sencha Touch 2.3.1 : Ext.field.DatePicker in 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.TextExt.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();

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