本文獻給那些看不懂官方API,接着又被網上被轉載N遍的論文折磨N遍的苦逼的程序猿們。
事先聲明:由於本人做線上webapp,所以本文不包括打包操作。如phonegap等JAVA操作.
由於Sencha Touch主要使用的是MVC模式,所以本文直接以MVC模式開始我們的路程。個人認為不應用MVC模式的Sencha Touch是沒有意義的,況且從MVC學習ST的話更為系統化。簡單,易懂,高端,大氣,上檔次!前提你要知道MVC模式.
Chapter 1:搭架構
創建Web工程,添加SenchaTouch類庫,不用非要按部就班的CMD創建工程,因為就算創建出來了對於初學者來說也不明白,所以對於初學者來說一步一步搭建SenchaTouch項目的框架是比較有好處的。下圖是對SenchaTouch一個比較干凈的引用。作者只用到了官方提供的CSS樣式如官方樣式表、蘋果樣式表、安卓樣式表、黑莓樣式表(日后應該會有WP7)很強大,直接link,就可改變全局風格。注意到了么,工程中有一個Index.html,我們要拿這一個頁面實現所有項目內頁面的實現,可能現在有些蒙,但看完下文你就會明白,這就是SenchaTouch的強大之處(Extjs也可以吧)。(額外提一點:不管是學習新東西還是遇到阻礙,切記要堅持,可謂鍥而不舍,金石可漏。說不定你就突然開竅了)
Index.html里只引用三個文件.app/app.js文件下面講解
HTML的聲明要寫成<!
DOCTYPE
HTML>,這才是HTML5的聲明.(不知道SenchaTouch是基於HTML5的就悲劇了)
Chapter 2:了解MVC(核心)
此MVC是由JS編寫的純JS MVC。之前有人問過我,居然不知道,慚愧之極。JS MVC編寫比較困難的地方就是全部文件都需要自己編寫(類似MVC引擎吧HTTP機制),不過看清之后還是比較簡單的,畢竟和ASP.NET MVC架構還是差的比較多的.坑爹Framwork老更新,無奈上了不歸路,學無止境啊.
說了是MVC嘛,要有一個入口文件(route),開始編寫app/app.js文件.腦子里想着OPP就好了.加載視圖,控制器(全部),實體(全部),數據源(全部)。視圖可以只預加載應用程序啟動時的特定頁面,其他頁面可以在控制器里按需創建加載。其他必須全部預加載。如引用的是Sench-touch-all.js,View中可以不用預加載頁面組件如文本框等。
如引用的是Sench-touch.js,View中組件需事先加載.例:requires ['Ext.MessageBox'],
目前先用不到Model和Store,先注釋槍斃,其他應該能看明白.
做的例子是查詢顯示功能。兩個頁面,兩個控制器。由於是學習階段,所以我們用一對一關系,一個控制器對一個視圖操作,思路清理后可以正常一對多關系解決。
//啟用自動加載 Ext.Loader.setConfig({ enabled: true }); //應用程序入口 Ext.application({ //應用程序名(命名空間) name: 'ST', //requires ['Ext.MessageBox'], //預加載(如采用sencha-toucha.js需要預加載) //需要加載的View views: ['query'], //數據模型 //models: ['ST.model.Unit'], //數據存儲 //stores: [ 'ST.store.Units'], //需要加載的控制器 controllers: ['query', 'QueryList'], //應用程序啟動 launch: function() { Ext.create("ST.view.query", { fullscreen: true }) } });
多多指教......
期待下文......