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

onclick事件弹出login的登陆页面

<!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" />
 
页: [1]
查看完整版本: onclick事件弹出login的登陆页面