| 前言： |
前段時間不才翻譯了關於Sencha Touch 2 MVC架構的一系列文章，大家的認可讓我備受鼓舞，也堅定了繼續分享自己學習Sencha Touch（下文簡稱ST）過程和經驗的決心。
在跟大家交流的過程中，發現很多入門者反映，學習ST最大的障礙有兩個：1、官方文檔跟進速度不夠；2、官方sample集成程度較高，典型性不足。
我認同大家的觀點：由於前期ST2版本更新極快，一個多月的時間從Beta到RC再到正式版，這期間小變動相當多，開發組的瘋狂精神固然值得欽佩，可是截至目前為止，仍有一些地方未作詳盡說明，而這對於剛接觸ST的朋友來講的確很困難。關於官方提供的sample集成度過高的問題，我覺得對從未接觸過Ext產品系的朋友來說，這一點也的確棘手。
所以這一階段我的打算是通過demo的方式，為剛開始學習的朋友們提供一些更具有典型性的實例，同時也嘗試對官方說明不夠的地方進行一下講解，希望對大家有幫助。
Sencha Touch 交流 QQ 群 213119459 歡迎您的加入。
| 本節目標：加載 ST2 到你的網頁，搭建運行環境 |
這一節的內容其實剛好可以對應官方文檔的《Getting Started with Sencha Touch 2》http://docs.sencha.com/touch/2-0/#!/guide/getting_started
為什么我前面一直沒有翻譯這一章節，原因也在這里，對於ST2來講，官方的這篇文檔顯然缺乏誠意，雖然它可以指點你寫出一個hello world，但是對ST2運行環境的搭建細節說明不夠，剛好今天我可以用一個完整的Demo來做一個詳細說明。
ST1的時候，搭建基於ST的網頁運行環境的確非常簡單，如官方這篇文檔所述已經足夠（這也是我認為誠意不夠的原因，為嘛不緊跟ST2的步伐呢）。
但是從ST2 Beta版開始，開發組提供了sencha-touch-all.js和sencha-touch.js兩個js文件，其目的是允許開發人員選擇ST框架是采用“一次性加載全部”的方式（簡稱all方式）還是“首次運行只加載核心代碼，隨后按需加載”的方式（簡稱core方式），在ST2的最終發布版中，core方式只有91k，而all方式有568k，這還都是壓縮后的大小，這樣的尺寸對比在mobile設備上意味着用戶體驗可能出現巨大差別，因此根據自身需求來選擇加載模式還是很有必要的。
其實ST2的正式版發布后，很多人就開始頭疼，因為大家發現下載的sdk包解壓縮后，里面的例子無法直接雙擊在Chrome里運行，這還不算完，ST官方網站上提供的sample源碼竟然也變得失去了可讀性，沒有了css文件的引入，沒有了app.js的引入，只是html頁面中被加入了一段壓縮混淆后的js代碼，很多人想不通，其實我當時也想不通:-）。
事情的真相是，正式版使用的那段混淆腳本叫做microloader，它通過異步加載一個app.json文件（這個文件也是正式版才出現的）來讀取對運行環境的初始化設定，然后根據app.json中的設定再去加載相應的css和js文件，甚至於設定app緩存等等（還有很多至今搞不清楚的設定），也就是說，采用此種方式，要調用的js和css文件被隱藏了，顯而易見，這種方式非常有助於保護你的源碼，當然也不是絕對安全的js源碼保護方式，但至少還是比什么都不做要強得多。
於是，ST2的正式版最終得以支持兩種模式下的四種手段來實現ST2框架文件的加載。而這也是本節的demo所要說明的。
| 開發環境說明 |
ST的開發說到底還是web開發，因此它對開發環境和開發工具其實並不挑剔，小到notepad，中到notepad++/editplus，大到eclipse/visual studio都可以，當然如果考慮到方便性的話，最好還是有自動格式、關鍵字高亮、自動補齊功能，但無論怎樣，目前似乎還沒有可以像Aptana通過插件來支持jQuery那樣完全支持ST的開發工具，我們期盼以后eclipse或者visual studio出現相應的插件吧。
對於普通開發者而言，我推薦notepad++，輕便的同時功能還算強大，如果你不怕塊頭大，Aptana和eclipse也是不錯的選擇。不過我用的是Visual Studio 2010，因為電腦上就有，無需安裝了。
| Demo代碼完整結構 |
下面對上述結構做一詳細說明：
最頂級是Demo和SenchaTouch兩個文件夾，分別用來放置Demo程序代碼和ST框架代碼：
SenchaTouch文件夾下面的2.0.0文件夾表明當前ST框架的版本號，再下面就是ST2框架的所有相關資源文件；
- 以sencha-touch開頭的4個js文件分別是ST2框架的all版和core版及其各自的debug版；
- css里面放置了ST2的幾套皮膚樣式文件；
- src文件夾下是ST2的所有源文件代碼，該文件夾內文件主要供core加載方式調用；
- 還有一個microloader文件夾，里面提供了剛才我們前面提到過的ST2正式版所采用最新加載方式所需js文件。
Demo文件夾下就是我們此次編寫的全部代碼文件：
- 1.LoadSenchaTouchDirectly文件夾下面有兩個html頁面和各自匹配的js文件，分別對ST傳統的主頁面直接嵌入js和css模式下，如何采用all和core兩種手段載入框架文件進行了示范；
- 2.LoadSenchaTouchWithMicroloader文件夾下有兩個html頁面、一個app.js外加一個app.json文件，演示了如何在html頁面中通過inline或者code-behind方式引用microloader實現ST的設定和加載。
| Demo所實現的效果：文本框與Picker結合實例 |
雖然本文目的是分別演示不同模式不同手段來加載ST2所需框架，但頁面上若只寫一個干巴巴的Hello World還是有些對不起觀眾，所以這里我實現了一個比較有實際使用價值的效果，那就是一個不可編輯文本框，該文本框的值只能通過一個Picker來選擇。效果圖如下：
下面開始一一介紹四種加載方式：
| A.直接加載完整框架文件（all方式） |
這種加載方式跟ST1開始的方式是一樣的，即在html頁面中明確引入sencha-touch的完整框架js文件、css文件以及應用程序代碼。
sencha-touch-all.html代碼:
暈死！博客園將我的相對路徑都自動轉成了站內絕對路徑，請自行將后面所有代碼中的"http://www.cnblogs.com/"改成"。。/。。/"（。換成.）
<!DOCTYPE html>
<html>
<head>
<title>Hello Mobile</title>
<link rel="stylesheet" href="http://www.cnblogs.com/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://www.cnblogs.com/SenchaTouch/2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
app-all.js代碼（代碼邏輯很簡單，看注釋即可）：
Ext.application({
name: 'Demo',
viewport: {
autoMaximize: true // 該屬性可以設置頁面自動最大化（隱藏地址欄）
},
launch: function () {
Ext.create("Ext.Panel", {
fullscreen: true,
items: [
{
xtype: 'fieldset',
margin: 10,
title: '文本框與Picker結合實例',
items: [
{
xtype: 'textfield',
name: 'aTextField',
id: 'aTextField',
readOnly: true, // 把文本框設為只讀，禁止輸入
label: '取值結果',
clearIcon: true,
listeners: {
// 偵聽文本框的focus事件，獲取到焦點時觸發
focus: function () {
this.disable(); // 先禁用文本框，防止系統調出軟鍵盤
Ext.getCmp('aPicker').show(); // 然后顯示用來選擇內容的Picker
}
}
}
]
}
]
});
// 定義一個Picker供文本框聯動
aPicker = Ext.create('Ext.Picker', {
name: 'aPicker',
id: 'aPicker',
hidden: true,
listeners: {
// 偵聽change事件，Picker的值改變同時也設定文本框的值
change: function () {
Ext.getCmp('aTextField').setValue(aPicker.getValue().question);
},
// 偵聽hide事件，當Picker消失時將文本框狀態恢復為enable
hide: function () {
Ext.getCmp('aTextField').enable();
}
},
slots: [
{
name: 'question',
data: [
{
text: '無',
value: ''
},
{
text: '最喜歡的顏色',
value: 'color'
},
{
text: '最喜歡的運動',
value: 'sport'
},
{
text: '最喜歡的明星',
value: 'star'
}
]
}
]
});
// 前面定義的Picker控件必須顯式加入Viewport，否則無法被調用顯示
// Ext.Viewport是Sencha Touch自動創建的一個頂級容器
Ext.Viewport.add(aPicker);
}
});
| B.先加載核心框架文件，然后按需加載其他組件（core方式） |
此種加載方式是ST2新增的，他為我們提供了更多地選擇，避免每個app都要加載巨大的sencha-touch-all.js。
不過具體使用的時候你會發現，這種core方式雖然相比all方式需要下載的文件小了，但同樣存在一些弊端：
- 單頁面加載文件的個數大大增加，這毫無疑問會加大服務器的並發壓力；
- 按需加載方式還將導致頁面渲染時間（指頁面所需文件下載完成到頁面渲染完成中間這段頁面顯示白屏的時長）變長，用戶體驗未見明顯提升。
所以最終選擇哪中方式，還要經過你自己仔細測算和評估自身需求而定。
sencha-touch-core.html代碼（相比A所采用的all方式，僅僅改變了對應用程序代碼文件（app-core.js取代了app-all.js）和框架js文件（sencha-touch-debug.js文件取代sencha-touch-all-debug.js文件）的引用：
<!DOCTYPE html>
<html>
<head>
<title>Hello Mobile</title>
<link rel="stylesheet" href="http://www.cnblogs.com/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://www.cnblogs.com/SenchaTouch/2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app-core.js"></script>
</head>
<body></body>
</html>
app-core.js代碼（着重觀察開始的部分，后面的代碼與all方式沒有區別）：
// 第一件事就是給src這個源文件目錄指定一個命名空間（具體參見官方文檔翻譯中的External Dependencies，即外部依賴）
Ext.Loader.setPath({
'Ext': 'http://www.cnblogs.com/SenchaTouch/2.0.0/src'
});
// 然后根據application用到的控件來添加對以下組件的引用（有人說Ext.TitleBar沒用到啊，其實用到了，在Picker里面）
// 大家請注意，其實這里的Ext命名空間指的就是上面Ext.Loader.setPath方法中指定的外部依賴命名空間
Ext.require(['Ext.form.FieldSet', 'Ext.picker.Picker', 'Ext.TitleBar']);
// 下面的代碼部分跟all方式完全保持了一致，故省略……
Ext.application({
name: 'Demo',
……
注意：A和B兩種方式由於對js和css文件采用了相對路徑的直接引用，所以直接在資源管理器雙擊運行就可以看到效果。
| C.通過Microloader加載ST框架（Code-behind方式） |
前文說過，Microloader是ST2正式版加入的新功能，通過這種模式加載ST2框架的話，在Chrome瀏覽器里無法直接查看效果，Safari可以。
采用Microloader模式又可以細分為Code-Inline和Code-behind兩種方式，Code-inline指的是把js腳本直接寫在html頁面里，Code-behind指的是鏈接外部js文件來實現。先看第一種（這也是官方sdk例子當中采用的方式）：
JsCodeBehind.html代碼（簡單的不能再簡單了，只引用了microloader文件夾下的development.js文件，經測試，其他兩個文件均無效，注意這里給script加了一個id）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Microloader</title>
<script id="microloader" type="text/javascript" src="http://www.cnblogs.com/SenchaTouch/2.0.0/microloader/development.js"></script>
</head>
<body>
</body>
</html>
我們知道這個microloader的功能是加載並讀取app.json文件里的設置，那么當然有必要看一下app.json代碼：
{
"name": "Demo", // app名稱
"js": [
{
"path": "http://www.cnblogs.com/SenchaTouch/2.0.0/sencha-touch-all-debug.js" // 引用的ST框架文件，這里我們選用all模式
},
{
"path": "app.js", // 引用的應用程序代碼文件
"update": "delta"
}
],
"css": [
{
"path": "http://www.cnblogs.com/SenchaTouch/2.0.0/css/sencha-touch.css", // 引用的css文件
"update": "delta"
}
],
"appCache": {
"cache": [
"JsCodeBehind.html",
"JsCodeInline.html"
],
"network": [
"*"
],
"fallback": []
},
"extras": [
],
"archivePath": "archive",
"buildPaths": {
"testing": "http://www.cnblogs.com/deploy/testing/Demo",
"production": "http://www.cnblogs.com/deploy/production/Demo",
"package": "http://www.cnblogs.com/deploy/package/Demo",
"native": "http://www.cnblogs.com/deploy/native/Demo"
},
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "no"
},
"id": "3a867610-670a-11e1-a90e-4318029d18bb"
}
由於官方尚未對app.json文件中的其他配置做詳細說明，因此我們在這里只關注前面3個配置，這些已經足夠我們正常運行ST應用程序了。為了方便起見，該文件中指定了調用的ST框架文件是sencha-touch-all-debug.js（all方式），應用程序代碼文件是app.js，它的代碼跟A中的沒有任何區別，這里就不再貼了。
| D.通過Microloader加載ST框架（Code-inline方式） |
Code-inline方式，顧名思義，把js代碼直接寫在html文件里，這是目前ST官網實例中所采用的方式（您可能已經注意到了，官方的例子與提供下載的sdk包中同一個例子所采取的方式並不相同）！
我們先隨便找一個官網部署的例子來看一下它的代碼（這里選擇的是正式版新增的例子TouchStylehttp://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html）：
<!DOCTYPE HTML>
<html manifest="cache.manifest" lang="en-US">
<head>
<meta charset="UTF-8">
<title>TouchStyle</title>
<script type="text/javascript">(function(n){function r(a){function b(a,j){var c=a.length,b,e;for(b=0;b<c;b++){e=a[b];var d=a,J=b,k=void 0;"string"==typeof e&&(e={path:e});e.shared?(e.version=e.shared,k=e.shared+e.path):(y.href=e.path,k=y.href);e.uri=k;e.key=g+"-"+k;f[k]=e;d[J]=e;e.type=j;e.index=b;e.collection=a;e.ready=!1;e.evaluated=!1}return a}var c;"string"==typeof a?(c=a,a=z(c)):c=JSON.stringify(a);var g=a.id,d=g+"-"+A+o,f={};this.key=d;this.css=b(a.css,"css");this.js=b(a.js,"js");this.assets=this.css.concat(this.js);this.getAsset=
function(a){return f[a]};this.store=function(){s(d,c)}}function v(a,b){i.write('<meta name="'+a+'" content="'+b+'">')}function p(a,b,c){var g=new XMLHttpRequest,d,c=c||B;try{g.open("GET",a,!0),g.onreadystatechange=function(){4==g.readyState&&(d=g.status,200==d||304==d||0==d?b(g.responseText):c())},g.send(null)}catch(f){c()}}function K(a,b){var c=i.createElement("iframe");m.push({iframe:c,callback:b});c.src=a+".html";c.style.cssText="width:0;height:0;border:0;position:absolute;z-index:-999;visibility:hidden";
i.body.appendChild(c)}function C(a,b,c){var g=!!a.shared;if(!g)var d=b,f=a.version,h,b=function(j){h=j.substring(0,f.length+4);h!=="/*"+f+"*/"?confirm("Requested: '"+a.uri+"' with checksum: "+f+" but received: "+h.substring(2,f.length)+"instead. Attemp to refresh the application?")&&L():d(j)};(g?K:p)(a.uri,b,c)}function D(a){var b=a.data,a=a.source.window,c,g,d,f;for(c=0,g=m.length;c<g;c++)if(d=m[c],f=d.iframe,f.contentWindow===a){d.callback(b);i.body.removeChild(f);m.splice(c,1);break}}function E(a){"undefined"!=
typeof console&&(console.error||console.log).call(console,a)}function s(a,b){try{l.setItem(a,b)}catch(c){if(c.code==c.QUOTA_EXCEEDED_ERR){var g=t.assets.map(function(a){return a.key}),d=0,f=l.length,h=!1,j;for(g.push(t.key);d<=f-1;)j=l.key(d),-1==g.indexOf(j)?(l.removeItem(j),h=!0,f--):d++;h&&s(a,b)}}}function u(a){try{return l.getItem(a)}catch(b){return null}}function L(){F||(F=!0,p(o,function(a){(new r(a)).store();n.location.reload()}))}function G(a){function b(a,b){var d=a.collection,e=a.index,
g=d.length,f;a.ready=!0;a.content=b;for(f=e-1;0<=f;f--)if(a=d[f],!a.ready||!a.evaluated)return;for(f=e;f<g;f++)if(a=d[f],a.ready)a.evaluated||c(a);else break}function c(a){a.evaluated=!0;if("js"==a.type)try{eval(a.content)}catch(b){E("Error evaluating "+a.uri+" with message: "+b)}else{var c=i.createElement("style"),e;c.type="text/css";c.textContent=a.content;"id"in a&&(c.id=a.id);"disabled"in a&&(c.disabled=a.disabled);e=document.createElement("base");e.href=a.path.replace(/\/[^\/]*$/,"/");w.appendChild(e);
w.appendChild(c);w.removeChild(e)}delete a.content;0==--f&&g()}function g(){function c(){d&&b()}function b(){var a=q.onUpdated||B;if("onSetup"in q)q.onSetup(a);else a()}function f(){l.store();e.forEach(function(a){s(a.key,a.content)});b()}var e=[],d=!1,g=!1,k=function(){g=!0},i=function(){h.swapCache();d=!0;k()},m;n.removeEventListener("message",D,!1);h.status==h.UPDATEREADY?i():h.status==h.CHECKING||h.status==h.DOWNLOADING?(h.onupdateready=i,h.onnoupdate=h.onobsolete=k):k();!1!==navigator.onLine&&
p(o,function(b){t=l=new r(b);var d;l.assets.forEach(function(b){d=a.getAsset(b.uri);(!d||b.version!==d.version)&&e.push(b)});m=e.length;0==m?g?c():k=c:e.forEach(function(b){function c(){C(b,function(a){b.content=a;0==--m&&(g?f():k=f)})}var d=a.getAsset(b.uri),e=b.path,h=b.update;!d||!h||null===u(b.key)||"delta"!=h?c():p("deltas/"+e+"/"+d.version+".json",function(a){try{var c=b,d;var e=u(b.key),h=z(a),a=[],j,i,l;if(0===h.length)d=e;else{for(i=0,l=h.length;i<l;i++)j=h[i],"number"===typeof j?a.push(e.substring(j,
j+h[++i])):a.push(j);d=a.join("")}c.content=d;0==--m&&(g?f():k=f)}catch(n){E("Malformed delta content received for "+b.uri)}},c)})})}var d=a.assets,f=d.length,l;t=a;H("message",D,!1);0==f?g():d.forEach(function(a){var c=u(a.key);null===c?C(a,function(c){s(a.key,c);b(a,c)},function(){b(a,"")}):b(a,c)})}function I(a){null!==i.readyState.match(/interactive|complete|loaded/)?G(a):H("DOMContentLoaded",function(){G(a)},!1)}var B=function(){},m=[],i=n.document,w=i.head,H=n.addEventListener,l=n.localStorage,
h=n.applicationCache,z=JSON.parse,y=i.createElement("a"),x=i.location,A=x.origin+x.pathname+x.search,o="app.json",F=!1,t;if("undefined"===typeof q)var q=n.Ext={};q.blink=function(a){var b=u(a.id+"-"+A+o);v("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");v("apple-mobile-web-app-capable","yes");v("apple-touch-fullscreen","yes");b?(a=new r(b),I(a)):p(o,function(b){a=new r(b);a.store();I(a)})}})(this);
;Ext.blink({"id":"3a867610-670a-11e1-a90e-4318029d18bb"})</script>
</head>
<body>
</body>
</html>
雖然只是經過了簡單混淆，可還是看得人很凌亂，不過我們可以輕易地找到app.json這個字符串。
對比之后，你會發現官網部署的幾乎所有例子都采用了這一段代碼，而且沒有一點的區別。那么理論上這段代碼就應該是通用的，所以我嘗試在自己的頁面中同樣拷貝加入這一段代碼，但可悲的事實告訴我NO！想不通啊想不通……
當然活人不能被尿憋死，這段代碼不行我就把microloader文件夾下三個js文件中的代碼依次拷貝過來測試，最后只有development.js這個文件中的代碼有效（因為Code-behind模式就只有它能行，所以這個結果是顯而易見的），於是最終的JsCodeInline.html代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Microloader</title>
<script type="text/javascript">
(function () {
function write(content) {
document.write(content);
}
function meta(name, content) {
write('<meta name="' + name + '" content="' + content + '">');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'app.json', false);
xhr.send(null);
var options = eval("(" + xhr.responseText + ")"), scripts = options.js || [], styleSheets = options.css || [], i, ln, path;
meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
meta('apple-mobile-web-app-capable', 'yes');
meta('apple-touch-fullscreen', 'yes');
for (i = 0, ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
path = path.path;
}
write('<link rel="stylesheet" href="' + path + '">');
}
for (i = 0, ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
path = path.path;
}
write('<script src="' + path + '"></' + 'script>');
}
})();
</script>
</head>
<body>
</body>
</html>
當然了，app.json和app.js文件沒有任何不同，最終測試效果也完全一致。
| 結語： |
到這里，我們完整解析了全部的ST2框架加載模式和手段，希望通過這篇文章可以幫助你理解ST2帶來的新功能。
為了方便大家自己調試，在這里奉上此Demo的全部源碼：猛擊這里下載
注意：此系列文章屬博主原創，轉載請注明作者信息和原始鏈接，謝謝合作。
Sencha Touch 交流 QQ 群 213119459 歡迎您的加入。