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 를 공 부 했 을 때 그 세 개의 파일 만 페이지 에 가 져 왔 는데,

     그 당시 에 이 세 개의 파일 ext - all. css, ext - base. js 와 ext - all. js 를 eclipse 의 extjs 디 렉 터 리 아래 에 놓 고 개발 하기 시 작 했 습 니 다. 그러나 위 에서 문 제 를 해결 할 때 팝 업 할 그 window 창 은 '최대 화', '닫 기', '최소 화' 아이콘 이 없 었 습 니 다. 그 당시 에 저 는 많은 글 을 찾 아 보 았 지만 이 유 를 찾 지 못 했 습 니 다.결 과 는 이 렇 습 니 다. 이것 은 실제로 페이지 에 표시 되 었 지만 보이 지 않 습 니 다. 마우스 로 맨 오른쪽 을 클릭 하면 이런 기능 이 있 습 니 다. 그래서 마지막 이 유 는 스타일 의 문제 입 니 다. 제 가 다른 스타일 을 도입 하지 않 았 기 때 문 입 니 다.그래서 마지막 으로 extjs 3.0 디 렉 터 리 아래 의 resources 의 모든 것 을 그 extjs 의 eclipse 디 렉 터 리 아래 에 시험 하면 결 과 는 정상적으로 나타 날 수 있 습 니 다.하하!드디어 끝났어.다음은 정확 한 코드 입 니 다: < link rel = "stylesheet" type = "text / css" href = "extjs / resources / css / ext - all. css" / >

좋은 웹페이지 즐겨찾기