Extjs Anchor布局

1.百分比（Percentage）定位 图1

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>&nbsp;&nbsp;父容器宽度=598（说明:600-左右两条边的宽度）'+
				'</br>&nbsp;&nbsp;宽度差值=600-400=200（父容器宽度600-子容器宽度400）'+
				'</br>&nbsp;&nbsp;计算后的子容器宽度=598-200=398px；父容器宽度-(父容器宽度-子容器宽度)'+
				'</br>高度计算：父容器高度-(父容器高度-子容器高度)'+
				'</br>&nbsp;&nbsp;父容器高度=373（说明:400-上下两条边的高度和header的高度）'+
				'</br>&nbsp;&nbsp;高度差值=400-300=100（父容器高度400-子容器高度300）'+
				'</br>&nbsp;&nbsp;计算后的子容器高度=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]
			});
        });