EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)

一、auto布局

说明:组件在容器中根据渲染顺序从上大小依次排列

例子:

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(
function(){
//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
width:
200,
height:
70,
title:
'panel1',
html:
'这是第一个panel'
});
var panel2 = Ext.create('Ext.panel.Panel',{
width:
270,
height:
100,
title:
'panel2',
html:
'这是第二个panel'
});
var panel3 = Ext.create('Ext.panel.Panel',{
width:
100,
height:
60,
title:
'panel3',
html:
'这是第三个panel'
});
//将3个panel放在一个弹出层中
var w = Ext.create('Ext.window.Window',{
width:
300,
height:
300,
title:
'auto布局',
layout:
'auto',
items:[panel1,panel2,panel3]
});
w.show();
});
</script>

执行结果:

EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)


二、anchor布局

说明:容器内的空间可以通过anchor属性来设置宽、高。格式:“宽 高”,如果是负数,表示距离右边(当设置宽的时候)/下边(当设置高的时候)的长度

例子:

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(
function(){
//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
anchor:
'100% 30%',
title:
'panel1',
html:
'100% 30%'
});
var panel2 = Ext.create('Ext.panel.Panel',{
anchor:
'-50 40%',
title:
'panel2',
html:
'-50 40%'
});
var panel3 = Ext.create('Ext.panel.Panel',{
width:
200,
height:
60,
title:
'panel3',
html:
'width:100,height:60,'
});
//将3个panel放在一个弹出层中
var w = Ext.create('Ext.window.Window',{
width:
300,
height:
300,
title:
'anchor布局',
layout:
'anchor',
items:[panel1,panel2,panel3]
});
w.show();
});
</script>

 

EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)

 

三、absolute布局

说明:在achor布局的基础上,可以设置容器内控件的左上角离容器左上角的距离

例子:

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(
function(){
//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
anchor:
'100% -10',
title:
'panel1',
html:
'x:30 y:20 anchor:100% -10',
//距离容器左边的长度
x:30,
//距离容器顶边的长度
y:20
});

//将3个panel放在一个弹出层中
var w = Ext.create('Ext.window.Window',{
width:
300,
height:
300,
title:
'anchor布局',
layout:
'absolute',
items:[panel1]
});
w.show();
});
</script>

执行结果:

EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)


四:Hbox布局

说明:在容器内部水平布局,能够设置flex属性,自适应宽度

设置了flex属性的控件的宽度=(容器宽度-设置了确定宽度的组件长度和)*当前控件flex属性值/(容器内控件flex值之和)

例子:

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(
function(){
//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
flex :
1,
title:
'panel1',
html:
'flex 1'
});
var panel2 = Ext.create('Ext.panel.Panel',{
flex:
2,
title:
'panel2',
html:
'flex:2'
});
var panel3 = Ext.create('Ext.panel.Panel',{
width:
60,
title:
'panel3',
html:
'width:60'
});
//将3个panel放在一个弹出层中
var w = Ext.create('Ext.window.Window',{
width:
300,
height:
100,
title:
'hbox布局',
layout:
'hbox',
items:[panel1,panel2,panel3]
});
w.show();
});
</script>

执行结果:



 

 

你可能感兴趣的:(absolute)