ExtJs 登陆界面制作方法

///
//加载提示框
ext.quicktips教程.init();
//创建命名空间
ext.namespace('xqh.extjs.frame');
//主应用程序
xqh.extjs.frame.app = function() {
}
ext.extend(xqh.extjs.frame.app, ext.util.observable, {
loginlogo:new ext.panel({
id: 'loginlogo',
height: 35,
frame:true,
bodystyle:'padding-top:4px',
html:'

后台ext框架

'
}),
//登陆表单
loginform: new ext.form.formpanel({
id: 'loginform',
defaulttype: 'textfield',
labelalign: 'right',
labelwidth: 60,
frame: true,
defaults:
{
allowblank: false
},
items:
[
{
name:'loginname',
fieldlabel: '登陆账号',
blanktext: '账号不能为空',
emptytext:'必填',
anchor: '98%'
},
{
name:'loginpsd',
inputtype: 'password',
fieldlabel: '登陆密码',
blanktext: '密码不能为空',
maxlength:10,
anchor: '98%'
}
]
}),
//登陆窗口
loginwin: new ext.window({
id: 'loginwin',
title: '登陆',
width: 250,
height: 150,
closable: false,
collapsible: false,
resizable:false,
defaults: {
border: false
},
buttonalign: 'center',
buttons: [
{ text: '关于' },
{ text: '登陆' }
],
layout: 'column',
items:
[
{
columnwidth:1,
items: ext.getcmp("loginlogo")
},
{
columnwidth: 1,
items: ext.getcmp("loginform")
}
]
}),
//初始化
init: function() {
this.loginwin.show();
}
});
//程序入口
ext.onready(function() {
var loginframe = new xqh.extjs.frame.app();
loginframe.init();
});

最终效果如下