Ext中anchor布局解释

阅读更多

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

要点:

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

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

Ext.onReady(function() {   

var panel1 = new Ext.Panel({   

  title: "panel1",   

 height: 100,   

  anchor: '-50',   

   html: "高度等于100，宽度=容器宽度-50"  

 });   

 var panel2 = new Ext.Panel({   

 title: "panel2",   

  height: 100,   

 anchor: '50%',   

 html: "高度等于100,宽度=容器宽度的50%"  

  });   

 var panel3 = new Ext.Panel({   

  title: "panel3",   

 anchor: '-10, -250',   

 html: "宽度=容器宽度-10,高度=容器高度-250"  

 });   

 var win = new Ext.Window({   

  title: "Anchor Layout",   

 height: 400,   

 width: 400,   

  plain: true,                       

 layout: 'anchor',   

 items: [panel1, panel2,panel3]               

});   

 win.show();   

});