onclick事件弹出login的登陆页面

最新推荐文章于 2024-04-25 23:56:41 发布

iteye_137

最新推荐文章于 2024-04-25 23:56:41 发布

阅读量1.7k

点赞数

分类专栏： ExtJS 文章标签： EXT CSS JavaScript Eclipse Struts ViewUI

ExtJS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用ExtJS创建带有最大化、最小化及关闭功能的登录对话框，并分享了解决样式缺失问题的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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个文件导入到页面中，

当时只把这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" />