var panel = new Ext.Panel({
border : false,
width : 460,
align:'center',
cls : 'loginbgimage',//设置页面背景的CSS
baseCls : 'ex-panel',//设置透明FORM 嵌入页面
layout : 'column',
items : [{
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
},{
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : .45,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : .55,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : '系 统 登 入',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : .45,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel'
}, {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : .55,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
title : ' ',
html : '',
baseCls : 'ex-panel',
items : f //f为我的登录表单
}]
})
panel.render('login');//渲染到显示的DIV
panel.el.center();//使的PANEL页面居中,注意必须放上渲染之后
}
css:
.loginbgimage {
background:url(../images/login_bbg.gif ) no-repeat left top;
position:absolute;
height:282px;
width:460px;
}
.ex-panel{border-style:solid;border-color:transparent;border-width:0;}