Anchor布局的效果直接看代码和效果图最为直观
Code
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Window LayOut</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all-debug.js"></script> <style type="text/css">
.x-panel-body p {}{
margin:10px; font-size:12px;
}
</style></head><body><script type="text/javascript"> //Anchor Layout要点:"1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值" 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, 400, plain: true, layout: 'anchor', items: [panel1, panel2,panel3] }); win.show(); });</script></body></html>