1.百分比(Percentage)定位 图1
2.偏移值(Offsets)定位 图2
3.参考边(Sides)定位
Ext.onReady(function() {
var panel_1 = new Ext.Panel({
title:'panel_1',
anchor:'60% 50%',
html:'<span style="font-size: 12px">(anchor:宽 高)'+
'</br>(anchor:60% 50%)'+
'</br>宽度=容器宽度*60%'+
'</br>高度=容器高度*50%'+
'</br>(anchor:50%)如果只提供一个值,只对子面板宽度生效,高度保持默认'+
'</br>注意:anchor不可与设置长度的属性width同时出现,否则width属性无效'+
'</span>'
});
var panel = new Ext.Panel({
title:'百分比定位(Percentage)父容器 width:600 height:400',
applyTo:'panel',
layout:'anchor',
width:600,
height:400,
items:[panel_1]
});
});
2.偏移值(Offsets)定位 图2
Ext.onReady(function() {
var panel_1 = new Ext.Panel({
title:'panel_1',
anchor:'-100 -50',
html:'<span style="font-size: 12px">(anchor:宽 高)'+
'</br>(anchor:-100 -50)'+
'</br>宽度=容器宽度-100(子面板到父容器右边100像素)'+
'</br>高度=容器高度-50(子面板到父容器下边50像素)'+
'</br>(anchor:-100)如果只提供一个值,只对子面板宽度生效,高度保持默认'+
'</br>注意:anchor不可与设置长度的属性width同时出现,否则width属性无效'+
'</span>'
});
var panel = new Ext.Panel({
title:'偏移值定位(Offsets)父容器 width:600 height:400',
applyTo:'panel',
layout:'anchor',
width:600,
height:400,
items:[panel_1]
});
});
3.参考边(Sides)定位
Ext.onReady(function() {
var panel_1 = new Ext.Panel({
title:'panel_1 初始宽度width:400 height:300',
width:400,
height:300,
anchor:'r b',
html:'<span style="font-size: 12px">(anchor:宽 高)'+
'</br>(anchor:r b)'+
'</br>宽度计算:父容器宽度-(父容器宽度-子容器宽度)'+
'</br> 父容器宽度=598(说明:600-左右两条边的宽度)'+
'</br> 宽度差值=600-400=200(父容器宽度600-子容器宽度400)'+
'</br> 计算后的子容器宽度=598-200=398px;父容器宽度-(父容器宽度-子容器宽度)'+
'</br>高度计算:父容器高度-(父容器高度-子容器高度)'+
'</br> 父容器高度=373(说明:400-上下两条边的高度和header的高度)'+
'</br> 高度差值=400-300=100(父容器高度400-子容器高度300)'+
'</br> 计算后的子容器高度=373-100=273px;父容器高度-(父容器高度-子容器高度)'+
'</span>'
});
var panel = new Ext.Panel({
title:'参考边定位(Sides)父容器 width:600 height:400',
applyTo:'panel',
layout:'anchor',
width:600,
height:400,
items:[panel_1]
});
});