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