Extjs4----anchor布局

最新推荐文章于 2024-04-28 18:31:50 发布

iteye_3224

最新推荐文章于 2024-04-28 18:31:50 发布

阅读量200

点赞数

本文深入探讨了Anchor布局在UI设计中的作用，解释了如何使用锚属性配置组件在父容器中的位置，并通过实例展示了不同锚属性值对组件定位的影响。重点介绍了配置字符串的使用方法，以及在容器尺寸变化时组件如何重新渲染位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

用anchor布局时，用anchor属性来配置组件在父容器中的位置

anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开

Ext.application(
		{
			name:'layout_anchor',
			launch:function(){
				Ext.create(
					'Ext.panel.Panel',
					{
						width:500,
						height:300,
						title:'anchor布局',
						layout:'anchor',
						x:60,
						y:80,
						renderTo:Ext.getBody(),
						items:[
						       {
						    	   xtype:'panel',
						    	   title:'第一个',
						    	   //表示宽度为父容器的75%，高度为父容器的20%
						    	   anchor:'75% 20%'
						       },{
						    	   xtype:'panel',
						    	   title:'第二个',
						    	   //表示相对于父容器右边距为130，相对于父容器下边距为120
						    	   anchor:'-130 -120'
						       }
						]
					}
				)
			}
		}
)

效果图