"yj" 님께서 질문주신 팝업그리드에서 부모페이지로 값 전송관련 답변입니다. IT Code Storage

질문) 팝업창에서 데이터 처리후 해당값을 부모창에 넘겨주는 것을 만드는데요.

공통팝업이다보니, 호출이 필요한 화면에서는 호출될 동일한 메소드명을 만들고 해당 팝업은 그냥 그 메소드명을 호출하는것으로 처리하려는데,

해당 메소드들을 못찾습니다..

어떻게 해야 팝업 윈도우에서 부모 창의 메소드를 호출할수 있을까요?

(--> 팝업창의 grid 선택하고 적용버튼 누름, 해당 grid 를 넘겨서.. 선택된 row 의 값들을 각 화면에서 처리하는것입니다.)

답변) 위에 대한 내용만으로는 어떠한 결과를 원하시는지 이해가 되지 않아 2가지 경우를 예를들어 답변드리도록 하겠습니다.

1. 동일 폼패널 2개 생성후, ExtJS Window컴포넌트의 자식 그리드컴포넌트에서 row 선택후 적용버튼 적용

<div id="panel1"></div>
<div id="panel2"></div>

제일먼저 임의의 폼패널 2개를 생성하기 위하여 각각 div 2개를 작성하였습니다.

Ext.onReady(function(){
	Ext.create("Ext.form.Panel",{
		renderTo : document.getElementById("panel1"),
		title : '주소검색 샘플예제(1)',
		width: 600,
		items : [{
			fieldLabel: '우편번호',
			name : 'zipcode',
			xtype : 'textfield',
        },{
			fieldLabel: '기본주소',
			name : 'default_address',
			xtype : 'textfield'
        },{
			fieldLabel: '상세주소',
			name : 'detail_address',
			xtype : 'textfield'
        }],
        fbar : [{
        	xtype : 'button',
        	text : '검색',
        	handler : function(btn){
        		if(Ext.getCmp("addrWindow") == undefined) {
        			showWindow(btn);
        		}
        	}
        }]
	});
	
	Ext.create("Ext.form.Panel",{
		renderTo : document.getElementById("panel2"),
		title : '주소검색 샘플예제(2)',
		width: 600,
		items : [{
			fieldLabel: '우편번호',
			name : 'zipcode',
			xtype : 'textfield',
        },{
			fieldLabel: '기본주소',
			name : 'default_address',
			xtype : 'textfield'
        },{
			fieldLabel: '상세주소',
			name : 'detail_address',
			xtype : 'textfield'
        }],
        fbar : [{
        	xtype : 'button',
        	text : '검색',
        	handler : function(btn){
        		if(Ext.getCmp("addrWindow") == undefined) {
        			showWindow(btn);
        		}
        	}
        }]
	})
})
function showWindow(btn){
	Ext.create('Ext.window.Window',{
		id : 'addrWindow',
		width : 700,
		height : 300,
		title : '주소검색창',
		items : [{
			xtype : 'grid',
			columns : [{
				text : '우편번호',
				flex : 1,
				dataIndex : 'zipcode'
			},{
				text : '주소',
				flex : 1,
				dataIndex : 'address'
			}],
			store : Ext.create("Ext.data.Store",{ 
				fields : ['zipcode','address'],
				data : [{
					zipcode : '111-222',
					address : '서울 종로구 삼청동'
				},{
					zipcode : '333-444',
					address : '경기 안양시 만안동'
				},{
					zipcode : '333-454',
					address : '경기 광주시 태전종'
				}],
				proxy : {
					type : 'memory'
				}
			})
		}],
		fbar : [{
			xtype : 'button',
			text : '적용',
			handler : function(btn2){
				var gridObj = Ext.getCmp("addrWindow").down("grid");
				var selectgrid = gridObj.getSelectionModel().getSelection()[0];
				var zipcode = selectgrid.get("zipcode");
			   	var address = selectgrid.get("address");
			   	var zipcodeObj = btn.up("form").down("textfield[name=zipcode]")
			   	var addressObj = btn.up("form").down("textfield[name=default_address]")
			   	//부모창 호출함수
			   	setPanel(gridObj,zipcode,address,zipcodeObj,addressObj);
			}
		}]
	}).show();
}
function setPanel(obj,zipcode,address,parent_zipcode,parent_address){
	parent_zipcode.setValue(zipcode);
	parent_address.setValue(address);
   	obj.up("window").close();
}

showWindow() 함수

그리드패널을 자식컴포넌트로 가지는 윈도우 컴포넌트를 폼패널의 검색버튼 클릭시 화면에 출력시키며

윈도우화면의 적용버튼 클릭시 선택된 그리드 ROW의 각 값을 setPanel 함수로 보내주는 기능을 가진

컴포넌트출력 + 기능함수입니다.

setPanel() 함수

각 선택된 값들을 폼패널의 입력컴포넌트에 대입을 하며

윈도우창을 CLOSE 해주는 기능을 가진 함수입니다.

실행을 해보도록 하겠습니다.

Window 컴포넌트 실행결과

우선 요청 주셨던 함수 하나로 검색버튼 위치에 따라

그리드내에 선택값이 해당 폼필드로 적용되는것을 확인 할 수 있습니다.

2. 일반 입력태그에 window.open으로 호출한 팝업내 그리드 패널에서 부모창 입력값에 내용전달하기

<form action="/전송URL" method="post" name="frm">
	우편번호 : <input type="text" name="zipcode"  /><input type="button" onclick="popuptest()" value="검색"/><br/>
	기본주소 : <input type="text" name="default_address"  /><br/>
</form>

위와같이 일반 HTML 소스코드 작성후 FUNCTION 2개를 SCRIPT 태그내에 정의합니다.

function popuptest(){
	window.open("/pop.html","test","'scrollbars=yes,toolbar=yes,resizable=yes,width=500,height=500,left=0,top=0");
}
function setadderss(zipcode,address) {
	document.frm.zipcode.value = zipcode;
	document.frm.default_address.value = address;
}

window.open으로 호출해준 pop.html 페이지다 하단 스크립트 코드를 적용합니다.

※ 부모창에는 ExtJS 연동을 할필요가 없으므로 ExtJS 관련 CSS 및 JS 파일을 INCLUDE 할 필요가 없습니다.

대신 WINDOW.OPEN 호출한 pop.html 파일에는 ExtJS관련 파일들을 include 해주어야 합니다.

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '그리드샘플',
		width : 500,
		height : 500,
		items : [{
			xtype : 'grid',
			columns : [{
				text : '우편번호',
				flex : 1,
				dataIndex : 'zipcode'
			},{
				text : '주소',
				flex : 1,
				dataIndex : 'address'
			}],
			store : Ext.create("Ext.data.Store",{ 
				fields : ['zipcode','address'],
				data : [{
					zipcode : '111-222',
					address : '서울 종로구 삼청동'
				},{
					zipcode : '333-444',
					address : '경기 안양시 만안동'
				},{
					zipcode : '333-454',
					address : '경기 광주시 태전종'
				}],
				proxy : {
					type : 'memory'
				}
			})
		}],
		fbar : [{
			xtype : 'button',
			text : '적용',
			handler : function(btn){
				var gridObj = btn.up("panel").down("grid");
				var selectgrid = gridObj.getSelectionModel().getSelection()[0];
				var zipcode = selectgrid.get("zipcode");
			   	var address = selectgrid.get("address");
			   	opener.setadderss(zipcode,address);
			   	self.close();
			}
		}]
	})
})

실행결과를 보도록 하겠습니다.