sencha touch 学习笔记- 视图与页面(2013网页装在兜里)

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

 

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

 

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

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

image

官方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 这个视图

image

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 阶段性打包的

image

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

只有一个安卓版本的

test
相关文章
|
移动开发 前端开发 JavaScript
网页|利用touch实现下拉刷新
网页|利用touch实现下拉刷新
127 1
网页|利用touch实现下拉刷新
Pyhton 使用浏览器打开本地 html(打开指定页面、新建标签栏 ....)
Pyhton 使用浏览器打开本地 html(打开指定页面、新建标签栏 ....)
143 0
|
开发工具 PHP C语言
【C#】【桌面应用开发】拖拽文件到文本框获得所拖拽文件的路径
【C#】【桌面应用开发】拖拽文件到文本框获得所拖拽文件的路径
232 0
【C#】【桌面应用开发】拖拽文件到文本框获得所拖拽文件的路径
|
JavaScript 前端开发
js实现仿桌面右键,出现右键菜单功能
javascript有右键事件,可以利用这个事件,实现右键菜单功能。 喜欢点个赞。转发备注出处。
4766 0
js实现仿桌面右键,出现右键菜单功能
|
JSON 前端开发 数据格式
extjs6 desktop 桌面多主题切换
extjs6 desktop想实现多主题切换,因为项目要编译,不像extjs4一样方便的切换主题,采用Ext.util.CSS.swapStyleShee的API进行切换主题,虽然可以无刷新即时切换,但有原主题残留,导致多主题叠加的现象,效果并不理想,因此,找到以下方法实现切换。
1353 0
|
SQL JavaScript .NET
sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 DEMO Ext.onReady(function() { //数据源 var data = { ...
1252 0