Extjs4布局详解(六)—Absolute布局

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

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

 

1. Ext.create('Ext.form.Panel', {    
2.         title: 'MHZG.NET - Absolute Layout',    
3.         width: 300,     
4.         height: 275,
5.         x:20,
6.         y:90,
7.         layout:'absolute',    
8.         defaultType: 'textfield',    
9.         items: [{
10.             x: 10,        
11.             y: 10,         
12.             xtype:'label',        
13.             text: 'Send To:'    
14.         },{
15.             x: 80,         
16.             y: 10,        
17.             name: 'to',         
18.             anchor:'90%'    
19.         },{        
20.             x: 10,         
21.             y: 40,        
22.             xtype:'label',        
23.             text: 'Subject:'    
24.         },{         
25.             x: 80,        
26.             y: 40,        
27.             name: 'subject',         
28.             anchor: '90%'
29.         },{        
30.             x:0,         
31.             y: 80,        
32.             xtype: 'textareafield',        
33.             name: 'msg',         
34.             anchor: '100% 100%'
35.         }],     
36.         renderTo: Ext.getBody()
37.     });

 

效果图