sencha touch Container

時間 2019-11-11

標籤 sencha touch container 简体版

原文原文鏈接

Container控件是咱們在實際開發中最經常使用的控件，大部分視圖控件都是繼承於Container控件，瞭解此控件能幫咱們更好的瞭解sencha touch。css

layout是一個很重要的屬性，可以幫助你進行佈局。html

layout的基本用法可見：http://www.cnblogs.com/html5mob/archive/2012/07/10/2583248.htmlhtml5

瞭解了基本用法以後，咱們能夠用此實現複雜的佈局，好比九宮格佈局。web

代碼以下：api

 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，其內的項將垂直佈局。app

 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指定默認屬性。ide

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。flex

經過如此佈局就可以讓每一個按鈕都佔用相同的空間，而且可以適應大部分的手機屏幕。

所用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*/

效果圖以下：

九宮格不是惟一的佈局方式，咱們還能夠這樣，代碼:

 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

效果以下：

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是指擴展插件，在這裏我本身寫了一個按鈕插件，按鈕控件原理相似於這個插件的寫法。

具體見：http://www.cnblogs.com/mlzs/p/3281084.html

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*/

效果以下：

值得注意的屬性還有：

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 });