Ext的Anchor格局

Ext的Anchor布局

Anchor布局的例子:

    //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,
             width: 400,
             plain: true,                    
             layout: 'anchor',
             items: [panel1, panel2,panel3]            
         });

         win.show();

     });