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代码
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
只有一个安卓版本的
