ExtJs 入门教程七[登陆窗体Demo：Login]

一、效果

二、代码

<style type="text/css">
.loginicon
{
background-image: url(image/login.gif) !important;
}
</style>
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//提交按钮处理方法
var btnsubmitclick = function () {
if (form.getForm().isValid()) {
//通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
Ext.Msg.alert("提示", "登陆成功!");
}
}
//重置按钮"点击时"处理方法
var btnresetclick = function () {
form.getForm().reset();
}
//提交按钮
var btnsubmit = new Ext.Button({
text: '提 交',
handler: btnsubmitclick
});
//重置按钮
var btnreset = new Ext.Button({
text: '重 置',
handler: btnresetclick
});
//用户名input
var txtusername = new Ext.form.TextField({
width: 140,
allowBlank: false,
maxLength: 20,
name: 'username',
fieldLabel: '用户名',
blankText: '请输入用户名',
maxLengthText: '用户名不能超过20个字符'
});
//密码input
var txtpassword = new Ext.form.TextField({
width: 140,
allowBlank: false,
maxLength: 20,
inputType: 'password',
name: 'password',
fieldLabel: '密　码',
blankText: '请输入密码',
maxLengthText: '密码不能超过20个字符'
});
//验证码input
var txtcheckcode = new Ext.form.TextField({
fieldLabel: '验证码',
id: 'checkcode',
allowBlank: false,
width: 76,
blankText: '请输入验证码！',
maxLength: 4,
maxLengthText: '验证码不能超过4个字符!'
});
//表单
var form = new Ext.form.FormPanel({
url: '******',
labelAlign: 'right',
labelWidth: 45,
frame: true,
cls: 'loginform',
buttonAlign: 'center',
bodyStyle: 'padding:6px 0px 0px 15px',
items: [txtusername, txtpassword, txtcheckcode],
buttons: [btnsubmit, btnreset]
});
//窗体
var win = new Ext.Window({
title: '用户登陆',
iconCls: 'loginicon',
plain: true,
width: 276,
height: 174,
resizable: false,
shadow: true,
modal: true,
closable: false,
animCollapse: true,
items: form
});
win.show();
//创建验证码
var checkcode = Ext.getDom('checkcode');
var checkimage = Ext.get(checkcode.parentNode);
checkimage.createChild({
tag: 'img',
src: 'image/checkcode.gif',
align: 'absbottom',
style: 'padding-left:23px;cursor:pointer;'
});
});
</script>

三、说明

（1）Window 属性 ：iconCls 定义图片    定义方式为：iconCls:'loginicon'  其中loginicon 要由css 指定其图片路径；在ExtJs对象里都是通过css的类选择器来指定样式；

（2）iconCls: 'loginicon':给窗体加上小图标，样式在第12行定义。

（3）var checkcode = Ext.getDom('checkcode');  查找指定id的对象，其结果为 HTML 对象；

（4）var checkimage = Ext.get(checkcode.parentNode); 获得指定HTML对象的父对象（form表单）form表单将其做为元素。

（5）checkimage.createChild({}); 创建出一个节点，其内容是Json型的数据；

四、问题

（1）在创建表单后，其表单属性：cls: 'loginform'

（2）在创建窗体后，其窗体属性：plain: false

（3）在创建窗体后，其窗体属性：shadow: true

（4）在创建窗体后，其窗体属性：animCollapse: true