[原]sencha touch之布局
今天记录一下关于sencha touch中的几种布局，其实很简单的，还是直接上代码，一目了然
1：box布局，其实就是vbox和hbox，说白了一个是横着摆放，一个是竖着摆放
Ext.application({
name:'myApp',
launch: function(){
var myPanel=Ext.create('Ext.Panel',{
id:'myPanel',
layout:{
type:'hbox',
pack:'end'
},
items:[
{
html:'One',
flex:1,
style:'background-color:red'
},
{
html:'two',
flex:2,
style:'background-color:green'
}
]
})
Ext.Viewport.add(myPanel);
}
})
第二种card布局，可以想象成多个叠加在一起的卡片，比如一副扑克都放在一起，一次只能看到一张
Ext.application({
name:'itKingApp',
/**
* card 布局
*/
launch:function(){
var panel=Ext.create('Ext.Panel',{
//card 布局： 父容器内可以存在多个子组件，但每一次只能显示一个，所以需要使用setActiveItem
// 来设置显示的子组件
// 可以使用docked配置选项，进行停靠，上下左右
layout:'card',
items:[
{
//docked:'left',
html:'第一个',
style:'background-color:green'
},
{
//docked:'right',
html:'第二个',
style:'background-color:yellow'
}
]
});
Ext.Viewport.add(panel);
panel.setActiveItem(1);
}
})
第三种是fit布局，fit就是填满的意思，就是不满父容器了
Ext.application({
name:'itKingApp',
/**
* fit 布局
*/
launch:function(){
var panel=Ext.create('Ext.Panel',{
items:[
{
html:'myPanel',
style:'background-color:green'
}
],
layout:'fit'
//fit 布局： 1:只存在一个子组件时，自动扩展到与父容器同样的大小
// 2:一般都为1个子组件，如果存在多个的话，也只显示一个，
});
Ext.Viewport.add(panel)
}
})
以上这些，其实自己用代码试验两次，就知道怎么回事了，这只是大体布局，其实精确的还是使用css了
作者：jjx0224 发表于2013-9-30 10:10:43
原文链接
阅读：111 评论：0
查看评论