Container控件是我们在实际开发中最常用的控件，大部分视图控件都是继承于Container控件，了解此控件能帮我们更好的了解sencha touch。
layout是一个很重要的属性，能够帮助你进行布局。
layout的基本用法可见：http://www.cnblogs.com/html5mob/archive/2012/07/10/2583248.html
了解了基本用法之后，我们可以用此实现复杂的布局，比如九宫格布局。
代码如下：
Ext.define('app.view.layout.Squared', {
alternateClassName: 'layoutSquared',
extend: 'Ext.Container',
xtype: 'layoutSquared',
config: {
title: '九宫格',
cls: 'home',
layout: 'vbox',
defaults: {
flex: 1,
layout: {
type: 'hbox',
align: 'center'
},
defaults: {
xtype: 'button',
iconAlign: 'top',
flex: 1
}
},
items: [{
items: [{
text: '按钮1',
iconCls: 'squared orangeYellow'
},
{
text: '按钮2',
iconCls: 'organize orange'
},
{
text: '按钮3',
iconCls: 'add roseRed'
}]
},
{
items: [{
iconCls: 'refresh lightBlue',
text: '按钮4'
},
{
iconCls: 'search green',
text: '按钮5'
},
{
iconCls: 'star yellow',
text: '按钮6'
}]
},
{
items: [{
iconCls: 'trash paleYellow',
text: '按钮7'
},
{
iconCls: 'maps smBlue',
text: '按钮8'
},
{
iconCls: 'action',
text: '按钮9'
}]
}]
}
});
layout: 'vbox'表示垂直布局，作用于21行所指的items，其内的项将垂直布局。
defaults: {
flex: 1,
layout: {
type: 'hbox',
align: 'center'
},
defaults: {
xtype: 'button',
iconAlign: 'top',
flex: 1
}
}
上面的代码中，第一行的defaults表示为22，36，50这三个items指定默认属性。
flex: 1表示以上3个items所占用空间都是1，意思是相同大小，所以他们各占1/3的空间。
layout: {
type: 'hbox',
align: 'center'
}
以上代码表示3个items之中的元素布局为横向布局，并且居中显示。
defaults: {
xtype: 'button',
iconAlign: 'top',
flex: 1
}
以上代码表示3个items之中按钮的默认配置，其中flex: 1表示每个按钮占用空间为1。
通过如此布局就能够让每个按钮都占用相同的空间，并且能够适应大部分的手机屏幕。
所用css:
.home .x-button .x-button-label {
font-weight:normal;
color:#3F444A;
font-size:.7em;
}
.home .x-button .x-button-icon {
font-size:1.5em;
}
.home .x-button {
background:none;
border:;
}
/*#region 字体颜色 */
.orangeYellow {
color:#F37E0B;
}
.orange {
color:#ED5F12;
}
.roseRed {
color:#DE3554;
}
.lightBlue {
color:#2C94B1;
}
.green {
color:#7DB13A;
}
.blue {
color:#4C93C2;
}
.yellow {
color:#F19300;
}
.paleYellow {
color:#F3B428;
}
.smBlue {
color:#45ADB9;
}
.yellowish {
color:#B15F2E;
}
.gray {
color:gray;
}
/*#endregion*/
效果图如下：
九宫格不是唯一的布局方式，我们还可以这样，代码:
Ext.define('app.view.Home', {
alternateClassName: 'home',
extend: 'Ext.Container',
xtype: 'home',
config: {
title: '首页',
cls: 'home',
layout: 'vbox',
defaults: {
height: '4.5em',
layout: 'hbox',
defaults: {
xtype: 'button',
iconAlign: 'top',
flex: 1
}
},
items: [{
items: [{
text: '九宫格',
iconCls: 'squared orangeYellow'
},
{
text: '面板',
iconCls: 'organize orange'
},
{
text: '列表',
iconCls: 'list roseRed'
},
{
iconCls: 'refresh lightBlue',
text: '个人中心'
}]
},
{
items: [{
iconCls: 'search green',
text: '按钮5'
},
{
iconCls: 'settings blue',
text: '按钮6'
},
{
iconCls: 'star yellow',
text: '按钮7'
},
{
iconCls: 'trash paleYellow',
text: '按钮8'
}]
},
{
width: '25%',
items: [{
iconCls: 'maps smBlue',
text: '按钮9'
}]
}]
}
});
相对于九宫格布局，我们做了以下修改
defaults: {
height: '4.5em',
layout: 'hbox',
defaults: {
xtype: 'button',
iconAlign: 'top',
flex: 1
}
}
第二行的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控件便是利用他们扩展出来的。
/*
*个人中心
*/
Ext.define('app.view.user.Info', {
alternateClassName: 'userInfo',
extend: 'Ext.Container',
xtype: 'userInfo',
requires: ['ux.plugin.ConTpl'],
config: {
cls: 'info',
title: '个人中心',
plugins: 'conTpl',
tpl: new Ext.XTemplate(
'<div class="bgdiv divline bh">',
'<div class="bgimg x-button" style="background:url({pic});" fire="saveImg"></div>',
'<div class="tc">亲爱的<span class="orange"> {username} </span>欢迎使用本程序</div>',
'</div>',
'<div class="bgdiv">',
'<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched" fire="loginOut" >退出登录</div>',
'</div>'
),
data: {pic:'',username:'test'}
}
});
data是指数据源，用于配置一些可变数据。
tpl是数据展示模版，具体用法可以参考Ext.Template， Ext.XTemplate这两个类
plugins是指扩展插件，在这里我自己写了一个按钮插件，按钮控件原理类似于这个插件的写法。
具体见：http://www.cnblogs.com/mlzs/p/3281084.html
cls只应用的css：
/*#region 详细页 */
.info .x-innerhtml {
font-size:.9em;
}
.info img {
width:100% !important;
height:auto !important;
}
.info .bgdiv {
padding:5px 10px;
}
.info .divline {
border-bottom:1px solid #dedede;
}
.info .title {
font-size:1.5em;
}
.info .label {
font-size:0.8em;
line-height:1.5em;
display:inline-block;
border-radius:0 40px 40px 0;
background:#FFC0CB;
padding:0 5px;
margin-bottom:5px;
border-left:2px solid orange;
}
/*#endregion*/
效果如下：
值得注意的属性还有：
activeItem：当前选中项，可以默认配置也可以通过setActiveItem方法来设置，我们做界面切换需要用到的。
autoDestroy：内部控件是否自动销毁，默认值是true。做界面切换的时候能够自动清理内存的。
baseCls：用于追加css，我们自行扩展一些控件时会用到，可以看看官方控件的源码来了解了解。
html：显示固定内容，例如：
Ext.define('app.view.About', {
alternateClassName: 'about',
extend: 'Ext.Container',
xtype: 'about',
config: {
title: '关于',
cls: 'info',
html: '这是一个开源示例,是我对sencha touch的深层应用.'
}
});
效果如下：
id:大家喜闻乐见的一个属性，不过在这里不推荐使用，推荐使用itemId这个属性替代他。
listeners：监听事件集合，一般在控制器中监听，不常用。
record：对应的数据模型，在panel中用来做校验等。
ui:其实作用和cls差不多，不过这里是指定一个皮肤的意思。
zIndex：一个喜闻乐见的css属性，具体作用请谷歌。
masked：遮罩效果，想知道有什么用？看这里：http://www.cnblogs.com/mlzs/p/3156845.html
值得注意的方法还有：
up/down：向上/向下查找元素
addCls/removeCls:添加/移除css,各种按下，选中效果就需要通过他们来实现了
addListener:添加事件监听，没啥可说的，很重要
animateActiveItem：带动画效果的activeItem方法
destroy：销毁控件本身
setData/getData:设置数据的方法能干啥不用我说罢
hide/show：隐藏/显示控件本身
on/un：绑定/移除事件，它是最常用的
removeAll：移除所有子项
removeAt：移除指定序号的子项
showBy：显示浮动层，用法仔细看api
值得主要的事件：
hide/show：视图被隐藏/显示，不推荐监听，资料：http://www.cnblogs.com/mlzs/archive/2013/06/13/3134162.html
activate/deactivate：视图被激活/取消激活，推荐监听，资料：http://www.cnblogs.com/mlzs/p/3382909.html
destroy：视图被销毁时
add：向视图同添加子项时
activeitemchange：调用setActiveItem方法会触发
move：视图被移除时，注意销毁和移除不一样，销毁连内存都清理了