0
点赞
收藏
分享

微信扫一扫

sencha touch Container

Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch。


layout是一个很重要的属性,能够帮助你进行布局。

layout的基本用法可见:​​javascript:void(0)​​

了解了基本用法之后,我们可以用此实现复杂的布局,比如九宫格布局。

代码如下:

1 Ext.define('app.view.layout.Squared', {
2 alternateClassName: 'layoutSquared',
3 extend: 'Ext.Container',
4 xtype: 'layoutSquared',
5 config: {
6 title: '九宫格',
7 cls: 'home',
8 layout: 'vbox',
9 defaults: {
10 flex: 1,
11 layout: {
12 type: 'hbox',
13 align: 'center'
14 },
15 defaults: {
16 xtype: 'button',
17 iconAlign: 'top',
18 flex: 1
19 }
20 },
21 items: [{
22 items: [{
23 text: '按钮1',
24 iconCls: 'squared orangeYellow'
25 },
26 {
27 text: '按钮2',
28 iconCls: 'organize orange'
29 },
30 {
31 text: '按钮3',
32 iconCls: 'add roseRed'
33 }]
34 },
35 {
36 items: [{
37 iconCls: 'refresh lightBlue',
38 text: '按钮4'
39 },
40 {
41 iconCls: 'search green',
42 text: '按钮5'
43 },
44 {
45 iconCls: 'star yellow',
46 text: '按钮6'
47 }]
48 },
49 {
50 items: [{
51 iconCls: 'trash paleYellow',
52 text: '按钮7'
53 },
54 {
55 iconCls: 'maps smBlue',
56 text: '按钮8'
57 },
58 {
59 iconCls: 'action',
60 text: '按钮9'
61 }]
62 }]
63 }
64 });


 layout: 'vbox'表示垂直布局,作用于21行所指的items,其内的项将垂直布局。

1         defaults: {
2 flex: 1,
3 layout: {
4 type: 'hbox',
5 align: 'center'
6 },
7 defaults: {
8 xtype: 'button',
9 iconAlign: 'top',
10 flex: 1
11 }
12 }

上面的代码中,第一行的defaults表示为22,36,50这三个items指定默认属性。

flex: 1表示以上3个items所占用空间都是1,意思是相同大小,所以他们各占1/3的空间。

1             layout: {
2 type: 'hbox',
3 align: 'center'
4 }

以上代码表示3个items之中的元素布局为横向布局,并且居中显示。

1             defaults: {
2 xtype: 'button',
3 iconAlign: 'top',
4 flex: 1
5 }

以上代码表示3个items之中按钮的默认配置,其中flex: 1表示每个按钮占用空间为1。

通过如此布局就能够让每个按钮都占用相同的空间,并且能够适应大部分的手机屏幕。

所用css:

1 .home .x-button .x-button-label {
2 font-weight:normal;
3 color:#3F444A;
4 font-size:.7em;
5 }
6 .home .x-button .x-button-icon {
7 font-size:1.5em;
8 }
9 .home .x-button {
10 background:none;
11 border:0;
12 }
13 /*#region 字体颜色 */
14 .orangeYellow {
15 color:#F37E0B;
16 }
17 .orange {
18 color:#ED5F12;
19 }
20 .roseRed {
21 color:#DE3554;
22 }
23 .lightBlue {
24 color:#2C94B1;
25 }
26 .green {
27 color:#7DB13A;
28 }
29 .blue {
30 color:#4C93C2;
31 }
32 .yellow {
33 color:#F19300;
34 }
35 .paleYellow {
36 color:#F3B428;
37 }
38 .smBlue {
39 color:#45ADB9;
40 }
41 .yellowish {
42 color:#B15F2E;
43 }
44 .gray {
45 color:gray;
46 }
47 /*#endregion*/


效果图如下:

sencha touch Container_ico


九宫格不是唯一的布局方式,我们还可以这样,代码:


1 Ext.define('app.view.Home', {
2 alternateClassName: 'home',
3 extend: 'Ext.Container',
4 xtype: 'home',
5 config: {
6 title: '首页',
7 cls: 'home',
8 layout: 'vbox',
9 defaults: {
10 height: '4.5em',
11 layout: 'hbox',
12 defaults: {
13 xtype: 'button',
14 iconAlign: 'top',
15 flex: 1
16 }
17 },
18 items: [{
19 items: [{
20 text: '九宫格',
21 iconCls: 'squared orangeYellow'
22 },
23 {
24 text: '面板',
25 iconCls: 'organize orange'
26 },
27 {
28 text: '列表',
29 iconCls: 'list roseRed'
30 },
31 {
32 iconCls: 'refresh lightBlue',
33 text: '个人中心'
34 }]
35 },
36 {
37 items: [{
38 iconCls: 'search green',
39 text: '按钮5'
40 },
41 {
42 iconCls: 'settings blue',
43 text: '按钮6'
44 },
45 {
46 iconCls: 'star yellow',
47 text: '按钮7'
48 },
49 {
50 iconCls: 'trash paleYellow',
51 text: '按钮8'
52 }]
53 },
54 {
55 width: '25%',
56 items: [{
57 iconCls: 'maps smBlue',
58 text: '按钮9'
59 }]
60 }]
61 }
62 });

相对于九宫格布局,我们做了以下修改

1         defaults: {
2 height: '4.5em',
3 layout: 'hbox',
4 defaults: {
5 xtype: 'button',
6 iconAlign: 'top',
7 flex: 1
8 }
9 }

第二行的flex变成了height,这样每行按钮所占高度不再是1/3而是固定的4.5em。

布局其他属性不变,但是3个items中按钮变成了4,4,1。

第三个items额外添加了width: '25%'属性,因为它里面只有一个按钮,按钮会完全占据它的空间,所以我们把宽度设置为25%。

css同九宫格中所用css

效果如下:

sencha touch Container_控件_02


layout的可配置属性card值得注意,我们一般利用这种布局来进行页面切换,官方NavigationView控件便是由此而来。

基本原理是利用Container控件的add,romove方法动态添加删除项,用以控制内存占用等,然后通过setActiveItem方法显示指定项。


另外还有data,tpl,tplWriteMode,plugins属性值得注意,我们常用的list控件便是利用他们扩展出来的。

1 /*
2 *个人中心
3 */
4 Ext.define('app.view.user.Info', {
5 alternateClassName: 'userInfo',
6 extend: 'Ext.Container',
7 xtype: 'userInfo',
8 requires: ['ux.plugin.ConTpl'],
9 config: {
10 cls: 'info',
11 title: '个人中心',
12 plugins: 'conTpl',
13 tpl: new Ext.XTemplate(
14 '<div class="bgdiv divline bh">',
15 '<div class="bgimg x-button" style="background:url({pic});" fire="saveImg"></div>',
16 '<div class="tc">亲爱的<span class="orange"> {username} </span>欢迎使用本程序</div>',
17 '</div>',
18 '<div class="bgdiv">',
19 '<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched" fire="loginOut" >退出登录</div>',
20 '</div>'
21 ),
22 data: {pic:'',username:'test'}
23 }
24 });

data是指数据源,用于配置一些可变数据。

tpl是数据展示模版,具体用法可以参考Ext.Template, Ext.XTemplate这两个类

plugins是指扩展插件,在这里我自己写了一个按钮插件,按钮控件原理类似于这个插件的写法。

具体见:​​javascript:void(0)​​

cls只应用的css:

1 /*#region 详细页 */
2 .info .x-innerhtml {
3 font-size:.9em;
4 }
5 .info img {
6 width:100% !important;
7 height:auto !important;
8 }
9 .info .bgdiv {
10 padding:5px 10px;
11 }
12 .info .divline {
13 border-bottom:1px solid #dedede;
14 }
15 .info .title {
16 font-size:1.5em;
17 }
18 .info .label {
19 font-size:0.8em;
20 line-height:1.5em;
21 display:inline-block;
22 border-radius:0 40px 40px 0;
23 background:#FFC0CB;
24 padding:0 5px;
25 margin-bottom:5px;
26 border-left:2px solid orange;
27 }
28 /*#endregion*/

效果如下:

sencha touch Container_控件_03


值得注意的属性还有:

activeItem:当前选中项,可以默认配置也可以通过setActiveItem方法来设置,我们做界面切换需要用到的。

autoDestroy:内部控件是否自动销毁,默认值是true。做界面切换的时候能够自动清理内存的。

baseCls:用于追加css,我们自行扩展一些控件时会用到,可以看看官方控件的源码来了解了解。

html:显示固定内容,例如:

1 Ext.define('app.view.About', {
2 alternateClassName: 'about',
3 extend: 'Ext.Container',
4 xtype: 'about',
5 config: {
6 title: '关于',
7 cls: 'info',
8 html: '这是一个开源示例,是我对sencha touch的深层应用.'
9 }
10 });

效果如下:

sencha touch Container_控件_04

id:大家喜闻乐见的一个属性,不过在这里不推荐使用,推荐使用itemId这个属性替代他。

listeners:监听事件集合,一般在控制器中监听,不常用。

record:对应的数据模型,在panel中用来做校验等。

ui:其实作用和cls差不多,不过这里是指定一个皮肤的意思。

zIndex:一个喜闻乐见的css属性,具体作用请谷歌。

masked:遮罩效果,想知道有什么用?看这里:​​javascript:void(0)​​ 


值得注意的方法还有:

up/down:向上/向下查找元素

addCls/removeCls:添加/移除css,各种按下,选中效果就需要通过他们来实现了

addListener:添加事件监听,没啥可说的,很重要

animateActiveItem:带动画效果的activeItem方法

destroy:销毁控件本身

setData/getData:设置数据的方法能干啥不用我说罢

hide/show:隐藏/显示控件本身

on/un:绑定/移除事件,它是最常用的

removeAll:移除所有子项

removeAt:移除指定序号的子项

showBy:显示浮动层,用法仔细看api


值得主要的事件:

hide/show:视图被隐藏/显示,不推荐监听,资料:​​javascript:void(0)​​

activate/deactivate:视图被激活/取消激活,推荐监听,资料:​​javascript:void(0)​​

destroy:视图被销毁时

add:向视图同添加子项时

activeitemchange:调用setActiveItem方法会触发

move:视图被移除时,注意销毁和移除不一样,销毁连内存都清理了












举报

相关推荐

0 条评论