Ext中anchor布局解释

Ext中anchor布局解释

• 博客分类： 
• ext

ext anchor 布局 

[size=large][size=medium]ext布局中的属性anchor:'100% 100%'貌似可以让面板自适应屏幕的分辨率 

要点: 

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽 

2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值"   [/size][/size] 

Java代码  

1. Ext.onReady(function() {     
2.   
3. var panel1 = new Ext.Panel({     
4.   
5.   title: "panel1",     
6.   
7.  height: 100,     
8.   
9.   anchor: '-50',     
10.   
11.    html: "高度等于100，宽度=容器宽度-50"    
12.   
13.  });     
14.   
15.  var panel2 = new Ext.Panel({     
16.   
17.  title: "panel2",     
18.   
19.   height: 100,     
20.   
21.  anchor: '50%',     
22.   
23.  html: "高度等于100,宽度=容器宽度的50%"    
24.   
25.   });     
26.   
27.  var panel3 = new Ext.Panel({     
28.   
29.   title: "panel3",     
30.   
31.  anchor: '-10, -250',     
32.   
33.  html: "宽度=容器宽度-10,高度=容器高度-250"    
34.   
35.  });     
36.   
37.  var win = new Ext.Window({     
38.   
39.   title: "Anchor Layout",     
40.   
41.  height: 400,     
42.   
43.  width: 400,     
44.   
45.   plain: true,                         
46.   
47.  layout: 'anchor',     
48.   
49.  items: [panel1, panel2,panel3]                 
50.   
51. });     
52.   
53.  win.show();     
54.   
55. });