sencha touch 学习笔记 视图与页面（2013网页装在兜里）

      其实今天我不是来写笔记的，作为一名单身屌丝，一直在思考在什么地方放招婚启事的问题，个人觉得，在博客园个人主页左侧开辟一块风水宝地，实在是太完美，恳请园长大人开发这个模块，实现写文章和征婚完美的统一。

作为一名web开发者，一直觉得视图比较抽象，而页面则形象多了，所以文章里面的视图和页面是一个意思

首先是页面存放的位置，在项目的view文件夹下，一个文件里面放一个视图，最简单的视图就是一个页面，复杂的视图可以是多个页面，这里先不管复杂的东西了

官方api关于视图的介绍：http://docs.sencha.com/touch/2.2.0/#!/guide/views

在sencha touch 里可以有很多视图，这些视图都在一个叫Viewport的容器里面，例如在app.js里面，应用程序刚启动时，创建了一个视图，并添加到Viewport中

 Ext.Viewport.main=Ext.create('cnblogs.view.Main');
        Ext.Viewport.add(Ext.Viewport.main);

如何定义一个视图

可以把视图理解为一个容器，容器里面放了各种组件，例如按钮、表单等

api容器：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.Container

定义一个视图最简单的方式就是继承容器例如

var aboutPanel = Ext.define('cnblogs.view.blogsinfo', {
extend: 'Ext.Panel'
});

通常，可以继承 Ext.Container，Ext.Panel 这两个基础容器

可以明显看到，一个视图也是一个类，因此，他有很多属性、方法

Ext.Panel api中的介绍：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.Panel

视图中一些比较重要的方法、事件、属性，这些在做页面时很有用

就拿我博客园项目里面的一个视图来举例：blogsinfo.js 这个视图

1：extend 继承，可以继承基本的容器组建Ext.Container，Ext.Panel 等

2：xtype  自定义组建类型，可以方便快捷的创建页面

      例如：

  var head={
            docked: 'top',
            xtype: 'titlebar',
            title: '博客详情'
        };

3：requires 这个页面在载入时候，有那些依赖，都放在这个里面

    例如：

  requires: [
      'cnblogs.store.blogsinfo'
    ],

4：config-》layout 页面内部的组建如何布局

5：config-》listeners 这个页面定义的监听器，监听事件，例如监听painted事件，这个事件比较有用，

       例如监听painted 事件 给页面各种东西赋值

6：initialize  页面初始化函数 这个函数也比较有用，相当于页面的构造函数，只执行一次

7：html  容器里面直接显示的html代码

8：tpl 模板代码，不清楚js模板引擎的点击 这里

9：data 数据，和tpl 配合使用用来盛页面的html代码

10：id The unique id of this component instance   意思是这个id是容器的id在所有组件里面唯一，生成到页面上也唯一 我理解和 div的id属相差不多

  用这些基本上就可以自己构造一个页面了 凭借data+tpl  已经可以完成绝大部分页面的制作了

文章源码

ps：我用博客园 rss做的rss阅读器，基于sencha touch+phonegap

源码：源码：https://github.com/qqqzhch/cnblogs

简单版本的源码：Hi，推荐文件给你 "cnblogs.zip" http://vdisk.weibo.com/s/zngmX

我用新浪sae 阶段性打包的

我用 phonegap 官方打包的 https://build.phonegap.com/apps/383899/share

只有一个安卓版本的