onclick事件弹出login的登陆页面

duyunfengsolo · 发表于 2013-1-29 07:29:37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ taglib prefix="s" uri="/struts-tags"%><link href="css/style.css" rel="stylesheet" type="text/css"></link><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="js/common.js"></script> <div id="header"> <ul class="topNav"><li class="home"><a href="Page.action?returnPage=index">Home</a></li><li class="pornstars"><a href="Page.action?returnPage=pornstar&word=AG">Pornstars</a></li><li class="members"><a href="#" id="member">Members</a></li><li class="signup"><a href="Page.action?returnPage=join">Signup</a></li> </ul> </div> <div id="loginForm"></div> <script>function a(){var form1 = new Ext.form.FormPanel({ renderTo:"loginForm", labelWidth: 75, method:'POST', title: '', bodyStyle:'padding:20px 20px 0', width: 300, defaults: {width: 200}, defaultType: 'textfield', onSubmit: Ext.emptyFn, submit: function() { this.getEl().dom.action= 'openid.servlet'; this.getEl().dom.submit(); }, items: [{ fieldLabel: 'username', id: 'username', name: 'username', allowBlank:false, blankText : "username is not null", width:150 },{ fieldLabel: 'password', blankText : "password is not null", id: 'password', name: 'password', allowBlank:false, width:150, inputType:'password' } ], buttons: [{ text: 'login', type:'button', id:'login', handler: function() { if (form1.form.isValid()) { form1.form.submit(); } } },{ text: 'reset', type:'reset', id:'clear', handler: function() { form1.form.reset(); } } ] }); var window = new Ext.Window({maximizable:true,minimizable:true,closable:true,modal:true,plain:true,resizable:false, title: 'login dialog', width: 300, height:180, layout: 'fit', bodyStyle:'padding:5px;', buttonAlign:'center', items: form1 }); window.show(); }Ext.onReady(function(){Ext.get("member").on("click",a);});</script> 上面是在点击“members” 链接后弹出个window的dialog，在这个window里面有加上了formpanel，所以才能达到我想要的效果。

另外透露一点：我刚开始学习extjs的时候，只把那3个文件导入到页面中，
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
当时只把这3个文件ext-all.css、ext-base.js和ext-all.js放在eclipse的extjs的这个目录下面，然后就开始开发了，但是当我在做上面问题的时候发现，要弹出的那个window窗口却没有"最大化"，"关闭"，"最小化"的图标，当时我查了好多文章没有找到原因，结果是这样的：它实际上是显示在页面中了，但是却看不到，用鼠标点击最右边却有这个功能的，所以最后的原因是：样式的的问题了，因为我没有把其它的样式引入进来的原因。所以最后把extjs3.0目录下面的resources的所有东西都考到那个extjs的eclipse目录下面来，结果就可以正常显示了。哈哈！终于搞定了。下面是正确的代码：<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

		自动登录	找回密码
密码			立即注册