Ext2.2用户名和密码登录表单的例子
这个表单也是我使用中的一个东西。感觉还不错。先看运行效果
http://p.blog.csdn.net/images/p_blog_csdn_net/java2000_net/EntryImages/20080919/2008-09-19_053452.gif
看代码
<div class="highlighter">
[*]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><span />
[*]<span /><html xmlns="http://www.w3.org/1999/xhtml"><span />
[*]<span /><head><span />
[*]<span /><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/><span />
[*]<span /><script type="text/javascript" src="adapter/prototype/prototype.js"></script><span />
[*]<span /><script type="text/javascript" src="adapter/prototype/scriptaculous.js?load=effects"></script><span />
[*]<span /><script type="text/javascript" src="adapter/prototype/ext-prototype-adapter.js"></script><span />
[*]<span /><script type="text/javascript" src="ext-all.js"></script><span />
[*]<span /><style type="text/css"><span />
[*]#LOGIN_FORM_LAYER {
[*] position:relative;
[*] top:150px;
[*] width: 965px;
[*] height: 551px;
[*]}
[*]#loginDIV {
[*] width:500px;
[*] position:relative;
[*] top:100px;
[*]}
[*]<span /></style><span />
[*]<span /></head><span />
[*]<span /><body><span />
[*]<span /><center><span />
[*]<span /><script type="text/javascript"><span />
[*]Ext.onReady(function(){
[*]<span />
[*] Ext.QuickTips.init();
[*]<span />
[*] // turn on validation errors beside the field globally
[*] Ext.form.Field.prototype.msgTarget = 'side';
[*]<span />
[*] var bd = Ext.getBody();
[*]<span />
[*] /*
[*] * ================ Simple form =======================
[*] */
[*] //bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
[*]<span />
[*]<span />
[*] var simple = new Ext.FormPanel({
[*] id: 'LOGIN_FORM',
[*] labelWidth: 75, // label settings here cascade unless overridden
[*] url:'login.jsp',
[*] frame:true,
[*] title: '<font size=3>登录系统</font>',
[*] bodyStyle:'padding:5px 5px 0',
[*] width: 350,
[*] defaults: {width: 230},
[*] defaultType: 'textfield',
[*] ctCls: 'font-size:12px',
[*]<span />
[*] items: [{
[*] fieldLabel: '用户名',
[*] name: 'username',
[*] allowBlank:false
[*] },{
[*] fieldLabel: '密码',
[*] name: 'password',
[*] inputType :'password'
[*] },new Ext.form.Hidden({
[*] name:'referer',
[*] value:'/index'
[*] })
[*] ],
[*]<span />
[*] buttons: [{
[*] id: 'submitButton',
[*] type: 'submit',
[*] text: '登录',
[*] tooltip: '点击这个按钮登录系统',
[*] handler: login
[*] }]
[*] });
[*] simple.render("loginDIV");
[*]});
[*]function login(){
[*] Ext.Ajax.request({
[*] url: '/login',
[*] form: 'LOGIN_FORM',
[*] success: function(t){
[*] alert(t.responseText);
[*] }
[*] });
[*]}
[*]<span /></script><span />
[*]<span /><div id="LOGIN_FORM_LAYER"><span />
[*]<span /><div id="loginDIV"></div><span />
[*]<span /></div><span />
[*]<span /></center><span />
[*]<span /></body><span />
[*]<span /></html><span />
[*]<span />
页:
[1]