sencha touch 學習筆記- 基礎中的基礎（類和項目結構）（2013網頁裝在兜里）

在開始學習sencha touch 時看到sencha touch竟然有如此多的組建，真方便，幾乎趕上了ASP.NET里面的那些拖拉彈唱的組建，這恐怕要和當年學習ASP.NET一樣學組建就要學上好長時間，以前學習這些組建的記憶浮現的腦海中。。。。。。。。。。。。。。。。。。。。。。

（ps：若干年后發現，學習這些東西是人生中最傻的決定，），所以在這個地方跌倒過一次，這次就繞過去

sencha touch  之所以優秀，幾乎可以和jquery分庭抗禮，是為什么呢？因為他有很多組建？因為他有很多插件？因為他的api很好用？（ps：個人感覺sencha touch 組建不多，插件不多，api也不好用），個人認為是因為sencha touch有自己強大的類機制。

http://docs.sencha.com/touch/2.2.0/#!/api   看看這么多組建

 

sencha touch 的基礎----類

sencha touch 之所以強大是因為sencha touch 有一套自己的類機制，可以以面向對象的方式去寫代碼，封裝業務邏輯，sencha touch 的組建、插件、api等都建立在這一套類機制的上面

幫助文檔中對類系統進行的介紹

http://docs.sencha.com/touch/2.2.0/#!/guide/class_system

和類相關的基本類

http://docs.sencha.com/touch/2.2.0/#!/api/Ext.ClassManager

作為學習sencha touch 簡單了解一下就好了

首先定義一個類的語法：Ext.define(className, properties);

Ext.define('Person', {
     //字段    
     name: 'Unknown',
     //構造函數
     constructor: function(name) {
         if (name) {
             this.name = name;
         }

         return this;
     },
     //方法
     eat: function(foodType) {
         alert("I'm eating: " + foodType);
          //返回自己，方便像jquery一樣寫代碼
         return this;
     }
});

然后創建一個類的實例或實例化一個類，這個有很多方法，例如

var aaron = new Person("Aaron");

Ext.create('cnblogs.view.Main');Ext.create("cnblogs.store.feedlist") 等方法

在sencha touch  中一不小心就忘記了把類實例化，總認為sencha touch 為自動實例化我要用的類。。。。

我知道的這些東西會自動載入，並實例化類的 代碼

 requires: [
        'Ext.MessageBox',
        'Ext.data.proxy.JsonP',
        'Ext.dataview.List'
    ],

    views: [
        'Main','cnblogs.view.blogsinfo'
    ],
    models:[
        'cnblogs.model.feedlist'
    ],
    stores:[
        'cnblogs.store.feedlist'
    ],

而且可以繼承一個類 例如繼承Person這個類，在sencha touch中開始用的比較多的也是繼承一個類

Ext.define('Developer', {
     extend: 'Person',

     constructor: function(name, isGeek) {
         this.isGeek = isGeek;

         // Apply a method from the parent class' prototype
         this.callParent([name]);

         return this;

     },

     code: function(language) {
         alert("I'm coding in: " + language);

         this.eat("Bugs");

         return this;
     }
});

類了解這些基本就行了，（ps：我也只了解這些）

項目結構

不會生成項目的點擊 這里

關於項目結構的詳細介紹 http://docs.sencha.com/touch/2.2.0/#!/guide/command_app

 

 

app.js里面的代碼 一般都是這樣的

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'cnblogs': 'app'
//設置sdk的目錄，就是下載的sencha touch 的源碼如果是自動生成項目這里就配置好了
});
//</debug>

//定義項目
Ext.application({
    name: 'cnblogs',

    requires: [              //requires 用來載入這些依賴的類
        'Ext.MessageBox',
        'Ext.data.proxy.JsonP',
        'Ext.dataview.List'
    ],

    views: [                  //views 用來載入依賴的視圖
        'Main','cnblogs.view.blogsinfo'
    ],
    models:[
        'cnblogs.model.feedlist'
    ],
    stores:[
        'cnblogs.store.feedlist'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/[e-mail]',
        '144': 'resources/icons/Icon~[e-mail]'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() { //所有依賴載入完畢，開始啟動項目
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.main=Ext.create('cnblogs.view.Main');
        Ext.Viewport.add(Ext.Viewport.main);
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});