sencha touch 入门系列 (九)sencha touch 视图组件简介
对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control层,所以这讲,我们将先介绍如何创建和使用我们的视图组件view。
首先,我们来介绍如何创建我们的视图组件,
在sencha touch中,已经封装好了一批在项目中可能常用的视图组件,如列表(list),form表单(formpanel),按钮(button)等等,
在官方example的kitchensink中的interface中,演示了所有的已有组件,地址如下:http://docs.sencha.com/touch/2.3.1/touch-build/examples/kitchensink/index.html,
有些同学可能打不开上面的地址,不过在下载的官方sdk包中的examples中也有kitchensink,你可以自行部署查看效果并阅读其源码,里面几乎包含了sencha touch所有的基础内容演示,是个不错的学习案例哦
定义和创建视图组件
对于已经被官方定义好的视图组件,我们可以使用Ext.create("组件对象名")的方式进行创建跟实例化组件对象,为了便于演示我们的项目,我们继续在之前我们创建的MyFirst项目中的app.js的launch方法中演示我们的示例代码,如下:
launch: function() {
// 销毁启动动画,项目启动时的那三个闪烁点,可根据情况需要进行修改
Ext.fly('appLoadingIndicator').destroy(); Ext.create('Ext.Container', {
html: 'Welcome to my app',
fullscreen: true
}); },
这段代码我们创建了一个输出内容为Welcome to my app的全屏内容面板,
fullscreen:true 设置面板为全屏,
html: 'Welcome to my app', 设置面板的输出内容,
下图为执行myFirst项目时的执行效果,
注:虽然我们可以写上面那样的代码创建任何的内置组件,
不过官方建议的做法是创建一个已有组件的子类对象,然后再实例化对象,
代码如下:
launch: function() {
// 销毁启动动画,项目启动时的那三个闪烁点,可根据情况需要进行修改
Ext.fly('appLoadingIndicator').destroy(); Ext.define('MyApp.view.Welcome', {
extend: 'Ext.Container', config: {
html: 'Welcome to my app',
fullscreen: true
}
}); Ext.create('MyApp.view.Welcome');
},
这段代码虽然跟之前的输出结果是一样的,不过这次我们拥有了一个可以让我们随意创建的新组件,
我们也可以根据自己的需要定义它的名称,标准格式为:appName.view.组件名称,这是官方推荐的命名规则,有利于我们构建mvc结构的项目
与此同时,我们可以在其中配置任何父组件已经包含的属性,因为这里只是通过继承传递了一个对象,在此基础上我们还可以自由地配置自己自定义的参数,而不会对原有组件产生任何影响。
给视图添加子组件
在视图组件中,我们一般通过配置items属性来设置子组件对象,我们对上面的代码做个修改,添加一个标题组件,代码如下:
launch: function () {
// 销毁启动动画,项目启动时的那三个闪烁点,可根据情况需要进行修改
Ext.fly('appLoadingIndicator').destroy(); Ext.define('MyApp.view.Welcome', {
extend: 'Ext.Panel', config: {
html: 'Welcome to my app',//页面输出内容
fullscreen: true,//设置面板为全屏显示
items:{
xtype:"titlebar",//通过xtype引入了一个titlebar组件
title:"我是标题"//给titlebar定义标题名称为“我是标题”
}
//
}
}); Ext.create('MyApp.view.Welcome'); },
这里items属性值是一个组件对象,如果我们有多个子组件,可以将其设置为对象数组,如下:
launch: function () {
// 销毁启动动画,项目启动时的那三个闪烁点,可根据情况需要进行修改
Ext.fly('appLoadingIndicator').destroy(); Ext.define('MyApp.view.Welcome', {
extend: 'Ext.Panel', config: {
html: 'Welcome to my app',//页面输出内容
fullscreen: true,//设置面板为全屏显示
items: [
{
xtype: "titlebar",//通过xtype引入了一个titlebar组件
title: "我是标题" //给titlebar定义标题名称为“我是标题”
},
{
xtype: "toolbar",//通过xtype引入了toolbar组件
title: "工具栏",//设置toobar的标题
docked: "bottom"//设置toolbar组件悬停在页面底部
}
]
}
}); Ext.create('MyApp.view.Welcome'); },
这里我们给items配置了对象数组来给container添加了两个子组件,
可以看到,这里我们使用了xtype这个属性来引入子组件对象,这个属性我们在之前几讲有提到过,
即依赖加载,只有当这个组件需要被渲染出来的时候才会去实例化这个组件,这样有利于优化项目的内存占用,
注:跟xtype相对的还有个xclass属性,xclass:"类名",上面的titlebar可以写成xclass:"Ext.TitleBar",
这个属性并不常用,因为它会在项目初始化时就实例化对象。
上面的代码就是我们定义跟创建基本的视图组件了,那么在mvc结构的项目中应该怎么做呢?
通常情况下,我们都应该把视图组件定义在appFolder指定的文件夹(默认为app)下的view目录中,
index.html
app.js
app/
controller/
model/
view/
MyView.js
你可以在app/view目录下任意创建你的视图组件,代码如下,我们在view文件夹下创建一个视图组件,命名为"MyFirst.view.MyView",注意命名规则,(项目名.view.自定义的类名),
然后在创建项目时,在app.js中通过views引入这个视图组件,如果不引入是会报错的,接着就可以create你的视图了.
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'], launch: function() {
Ext.create('MyApp.view.MyView');
}
});
这讲我们简单介绍了视图组件的用法,下一讲我们将会介绍下sencha touch中的常用布局,
由于考虑到各模块组件的复杂性以及相关性,在下一讲之后
我们将通过写一个实际的项目demo来讲解各模块各组件以及各种实际开发中的用法,让大家对sencha touch有更直观的认识
sencha touch 入门系列 (九)sencha touch 视图组件简介的更多相关文章
- sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
- sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
- sencha touch 入门系列 (二)sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...
- sencha touch 入门系列 (六)sencha touch运行及代码解析(下)
接着上一讲,通过index.html里development.js对app.json里js资源文件的解析,app.js便被index.html引入了, app.js是整个项目的程序入口,在项目完成时使 ...
- sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析
通过上一章节的操作,我们的项目已经创建完成了, 大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用, 接下来,我们展开我们项目,如图所示: 一.目录结构 1. .s ...
- sencha touch 入门系列 (七)sencha touch 类系统讲解(上)
在mvc结构的基础上,sencha touch又使用了sencha公司为extjs4开发出来的类系统,在面向对象的编程语言中,类是对对象的定义,它描述了对象所包含的大量属性和方法. 跟面向对象语言类似 ...
- sencha touch 入门系列 (八)sencha touch类系统讲解(下)
接着上一讲,我们通过一组代码来讲解一下st的类的一些属性: Ext.define("MyConfig",{ config:{ website:"http://127.0. ...
- sencha touch 入门系列 (一)sencha touch 简介
参考链接:http://mobile.51cto.com/others-278381.htm Sencha touch 是基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合J ...
- sencha touch 入门系列 (五)sencha touch运行及代码解析(上)
由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...
随机推荐
- HIVE中的order by操作
hive中常见的高级查询包括:group by.Order by.join.distribute by.sort by.cluster by.Union all.今天我们来看看order by操作,O ...
- SecureCRT连接AWS EC2云主机密码登录
申请了亚马逊的EC2,要通过ssh 加密钥的形式登录,特别麻烦,而且感觉ssh登录AWS的云主机后好卡,这里是更改成用户名和密码的形式登录云主机,可以通过SecureCRT直接登录 1.首先通过ssh ...
- 我的mac的其他满了,发现是一个叫core的文件
6Q12KFX%PDARS7B{B__OZVW.jpg (97.93 KB, 下载次数: 0) 下载附件 保存到相册 2014-7-3 15:40 上传 如图,电脑虽然买了半年但是基本没怎么用, ...
- lvm 新建一个vg 逻辑卷 配置启动
fdisk /dev/sdb 格式 t 8e w vgcreate datavg /dev/sdb1lvcreate -L 999G -n lvdata datavgmkfs.xfs /dev/da ...
- iOS边练边学--通知机制和键盘处理
一.通知中心(NSNotificationCenter) 每一个程序都有一个通知中心实例,专门负责协助不同对象之间的消息通信 任何一个对象都可以想通知中心发布通知(NSNotification),描述 ...
- php-config 介绍
php-config php-config 是一个简单的命令行脚本用于获取所安装的 PHP 配置的信息. 在编译扩展时,如果安装有多个 PHP 版本,可以在配置时用 --with-php-config ...
- ThinkPHP3.2 分组分模块
ThinkPHP/Conf/convention.php 'CONTROLLER_LEVEL' => 1, 修改成 'CONTROLLER_LEVEL' => 2,
- centos 部署 SparkR
---恢复内容开始--- 环境配置—— 操作系统:CentOS 6.5 JDK版本:1.7.0_67 Hadoop集群版本:CDH 5.3.0 安装过程—— 1.(1)安装R yum install ...
- JQueryMobile开发必须的知道的知识
移动Web页面的基本组成元素: 页面头部,页面内容,页面底部 <!DOCTYPE html> <html> <head> <title>My Page& ...
- Collections 集合工具类
集合工具类 包括很多静态方法来操作集合list 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及线程安全等各种操作. 1) 排序( ...