EXTJS学习系列提高篇:第五篇作者殷良胜,经典布局

先看看布局的效果 

借用靓女的靓照就可以让窗体显得更加漂亮了,秘诀!

下面再看看源代码吧.

 

Code
<form id="form1" runat="server">
<img id="leftImg" src="../Images/0.jpg" width="150" height="150" alt="" />  //这句是存放图片的地方
<div>
<script type="text/javascript">
function LoginDemo()
{        
    //左面显示图片
    var leftPanel = new Ext.Panel
    ({
         id:"leftPanel",contentEl:"leftImg",bodyStyle:"padding:20px"
    });
    //右上方显示管理系统几个字
    var right_topPanel = new Ext.Panel
    ({
        id:"right_topPanel",labelPad:0,labelWidth:50,bodyStyle:"padding-left:81px",layout:"form",
        items:{xtype:"label",text:"管理系统"}
    });
    //右下方显示输入框和按钮
    var right_bottomPanel = new Ext.Panel
    ({
        id:"right_bottomPanel",labelPad:0,labelWidth:50,bodyStyle:"padding:10px",layout:"form",
        items:
        [
            {xtype:"field",id:"UserName",fieldLabel:"用户名" ,width :150},
            {xtype:"field",id:"Password",fieldLabel:"密&nbsp;&nbsp;&nbsp;码" ,width :150}   
        ],
        buttons:
        [
            {xtype:"button",text:"确定",width:25},
            {xtype:"button",text:"取消",width:25}
        ],
        buttonAlign:"center"             
    });
    //右面将右上方和右下方组合在一起
    var rightPanel = new Ext.Panel
    ({
         id:"rightPanel",labelPad:0,labelWidth:50,bodyStyle:"padding:30px",layout:"form",             
         items:
         [
            right_topPanel,
            right_bottomPanel
         ]
    });
    //登陆窗体将左面和右面组合在一起,采用layout:"column",的布局方式
    var loginPanel = new Ext.FormPanel
    ({
         id:"loginPanel",   
         height :420,
         frame:true,
         layout:"column",
         items:
         [                  
            leftPanel,rightPanel
         ]         
    });
    //通过Window窗口的方式显示登陆窗体
    var loginWindow;
    if(!loginWindow)
    {
        loginWindow = new Ext.Window
        ({
             id:"loginWindow",
             title:"管理系统---登陆窗口",
             width:500,
             height:280, 
             resizable:false,
             items:
             [
                loginPanel
             ]
        });
    }
    loginWindow.show();
}
Ext.onReady(LoginDemo);
</script>
</div>
</form>