Eddy@Joomla!

(1 位用戶參與評分, 當前平均得到 5.00 顆星星)

Javascript / Sencha Touch / Eddy Chang / 週六, 26 十一月 2011 00:00

Sencha Touch是給熟悉Extjs的程式開發員使用的，這樣說一點也不為過。Sencha Touch的基礎是Extjs，這個學習門檻相當高的Javascript框架，沒有Extjs的基礎，根本沒辦法寫出什麼，況且，新的MVC架構更是一個龐大而複雜的架構。

ajax是第一個範例，這個範例中可以學到什麼？

最前面想必是所有Touch的應用程式需要的宣告，平板電腦的啟動畫面（splash screen）、手機的啟動畫面、按鈕用的圖示，圖示是不是要有玻璃效果…就先記得有這個東西就可以：

Ext.setup({
 tabletStartupScreen: 'tablet_startup.png',
 phoneStartupScreen: 'phone_startup.png',
 icon: 'icon.png',
 glossOnIcon: false,

接下來的Ext.XTemplate的用法，是要抓取在index.html中定義的XTemplate區段，這個區段的名稱稱為weather：

var tpl = Ext.XTemplate.from('weather');

看一下index.html中的這個樣版區段的定義：

<textarea id="weather" class="x-hidden-display">
 <tpl for=".">
 <div class="day">
 <div class="date">{date}</div>
 <tpl for="weatherIconUrl"><img src="/{value}"/></tpl>
<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>
 </div>
 </tpl>
</textarea>

Ajax送出要求的函式和Ext.Ajax.request沒什麼差異，這裡多加了一個mask（載入中…）的中間過程視窗而已，用的是Ext.getBody().mask和unmask兩個對照的方法，這個方式可以學習一下。另外在Ajax成功抓取到資料後，把回應的字串填入Panel（即id是content這個元件），用的方法是update()，而設定標題用的是setTitle()（這是Toolbar元件的方法）：

var makeAjaxRequest = function() {
 Ext.getBody().mask('Loading...', 'x-mask-loading', false);
 Ext.Ajax.request({
 url: 'test.json',
 success: function(response, opts) {
 Ext.getCmp('content').update(response.responseText);
 Ext.getCmp('status').setTitle('Static test.json file loaded');
 Ext.getBody().unmask();
 }
 });
 };

JSONP的要求方式和AJAX類似，在設定時多了一個callbackKey屬性，用來作為回調之用。當然因為設定這個屬性是'callback'，在設定中也要加入這個方法才行。

在callback中用了tpl.applyTemplate()這個方法，對應最開始上面定義的tpl=Ext.XTemplate.form('weather');定義，當然這就是把抓回來的資料載入這個樣版之中，然後再update一下Panel元件，顯示就完成了。

Ext.util.JSONP.request({
 url: '<a href="http://free.worldweatheronline.com/feed/weather.ashx'">http://free.worldweatheronline.com/feed/weather.ashx'</a>,
 callbackKey: 'callback',
 params: { 
 key: '23f6a0ab24185952101705',
 // palo alto
 q: '94301',
 format: 'json',
 num_of_days: 5
 },
 callback: function(result) {
 var weather = result.data.weather;
 if (weather) {
 var html = tpl.applyTemplate(weather);
 Ext.getCmp('content').update(html); 
 }
 else {
 alert('There was an error retrieving the weather.');
 }
 Ext.getCmp('status').setTitle('Palo Alto, CA Weather');
 Ext.getBody().unmask();
 }
 });

關於XTemplate的用法，官方有兩段教學影片很詳細的解說了：

Dim lights Embed Embed this video on your site