Extjs4---absolute布局

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%' 
							        }
							]
						}
				)
			}
		}
)

效果图

Extjs4---absolute布局

你可能感兴趣的:(absolute)