ExtJS4.2 登陆表单(Login)简单示例
下面实例演示如何实现一个简单的extjs登陆表单，详细代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="../Extjs/ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="../Extjs/ext4.2/bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var loginForm = Ext.create("Ext.form.Panel", {
title: '用户登陆',
frame: true,
width: 320,
bodyPadding: 10,
defaultType: 'textfield',
defaults: {
anchor: '100%',
labelWidth: 50,
labelAlign: "right"
},
items: [
{
allowBlank: false,
fieldLabel: '用户名',
name: 'UserName',
emptyText: '用户名'
},
{
allowBlank: false,
fieldLabel: '密码',
name: 'Password',
emptyText: '密码',
inputType: 'password'
},
{
xtype: 'checkbox',
fieldLabel: '记住我',
name: 'remember'
}
],
buttons: [
{ text: '注册' },
{ text: '登陆' }
],
renderTo: "container"
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
界面如下：
