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