Sencha Touch學習使用心得 Unit 1


本文獻給那些看不懂官方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
        })
    }
});

多多指教......

期待下文......


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM