一：HBox
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
水平纵向排列
代码：
Ext.application({
name:
'MyApp'
,
launch:
function
() {
Ext .create(
'Ext.Container'
,{
fullscreen:
true
, //全屏
layout:
'hbox'
, //水平纵向布局
items:[
{
xtype:
'panel'
,
html:
'消息列表'
,
flex:1 //宽度所占比例为全屏的1/3
},
{
xtype:
'panel'
,
html:
'消息视图'
,
flex:3
}
]
})
}
});
二：VBox
水平横向(垂直)排列
代码:
Ext.application({
name:
'MyApp'
,
launch:
function
() {
Ext .create(
'Ext.Container'
,{
fullscreen:
true
,
layout:
'vbox'
,
items:[
{
xtype:
'panel'
,
html:
'消息列表'
,
flex:1 //高度所占比为全屏高度的1/3
},
{
xtype:
'panel'
,
html:
'消息视图'
,
flex:2
}
]
})
}
});
三：Fit
子组件适应父类容器的全尺寸(全屏)
代码:
Ext.application({
name:
'MyApp'
,
launch:
function
() {
var
panel = Ext .create(
'Ext.Panel'
,{
width:200,
height:200,
layout:
'fit'
, //充满父类窗口
items:[
{
xtype:
'panel'
,
html:
'Also 200px by 200px'
}
]
});
Ext .Viewport.add(panel);
}
});
四：Docking(对接)
水平纵向对接
代码:
Ext.application({
name:
'MyApp'
,
launch:
function
() {
var
panel = Ext .create(
'Ext.Container'
,{
fullscreen:
true
,
layout:
'hbox'
,
items:[
{
docked:
'top'
,
//对接位置
xtype:
'panel'
,
height:
'50'
,
html:
'This is docked to the top'
},
{
xtype:
'panel'
,
html:
'消息列表'
,
flex:1
},
{
xtype:
'panel'
,
html:
'消息视图'
,
flex:2
}
]
});
}
});
水平纵向对接
代码:
Ext.application({
name:
'MyApp'
,
launch:
function
() {
var
panel = Ext .create(
'Ext.Container'
,{
fullscreen:
true
,
layout:
'hbox'
,
items:[
{
docked:
'left'
,
//对接位置
xtype:
'panel'
,
height:
'50'
,
html:
'This is docked to the top'
},
{
xtype:
'panel'
,
html:
'消息列表'
,
flex:1
},
{
xtype:
'panel'
,
html:
'消息视图'
,
flex:2
}
]
});
}
});
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
