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/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    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();
                }
            }
        );
    }
});