Extjs4---absolute布局

最新推荐文章于 2020-03-12 09:54:15 发布

最新推荐文章于 2020-03-12 09:54:15 发布 · 89 阅读

本文介绍了一种ExtJS中的Absolute布局方式，该布局继承自Anchor布局，并通过增加X/Y坐标来实现子组件的精确位置控制。示例展示了如何创建一个包含多个输入框和标签的面板，并设置它们的具体位置。

Absolute布局继承Ext.layout.container.Anchor布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。

Ext.application(
		{
			name:'absolute',
			launch:function(){
				Ext.create(
						'Ext.panel.Panel',
						{
							title:'absolut布局',
							width:500,
							height:300,
							//父容器的位置
							x:20,
							y:30,
							//设置布局为absolute
							layout:'absolute',
							renderTo:Ext.getBody(),
							items:[
							       {
							       	   //设置控件的位置
							    	   x: 10,         
							           y: 10,          
							           xtype:'label',         
							           text: 'Send:'    
							       },{
							    	   x: 80,          
							           y: 10,
							           name: 'to', 
							           xtype:'textfield',         
							           anchor:'90% '   
							       },{         
							            x: 10,          
							            y: 40,         
							            xtype:'label',         
							            text: 'Subject:'     
							        },{          
							            x: 80,         
							            y: 40,         
							            name: 'subject',
							            xtype:'textfield',           
							            anchor: '90% ' 
							        },{         
							            x:0,          
							            y: 80,         
							            xtype: 'textareafield',         
							            name: 'msg',          
							            anchor: '100% 100%' 
							        }
							]
						}
				)
			}
		}
)

效果图