Scroll Event

Scroll 관련 EVENT 동작을 확인 합니다.


요약

Scroll 관련 EVENT 동작을 확인 합니다.

입력값

String : 이벤트


String : 이벤트 발생시 호출할 사용자 함수명



예) datagrid1.vscroll.addEventListener("onscrollup","eventVScrollProcess","","")
function eventVScrollProcess(event){
//cell값 변경시 동작되는 부분//
}

상세설명

SBGrid의 Scrollbar를 위쪽 또는 왼쪽으로 이동 시 oncsrollup 이벤트, 아래쪽 또는 오른쪽으로 이동 시 onscrolldown 이벤트가 발생합니다.
이벤트 처리 문장의 vscroll.addEventListner는 가로스크롤 이벤트, hscroll.addEventListener는 세로스크롤 이벤트 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java"   contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
	<meta content="IE=9" http-equiv="X-UA-Compatible">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SoftBowl SBGrid Example</title>
	<link href="../../css/common.css" type="text/css" rel="stylesheet"/>
	<link href="../../css/common/stylesheet.css" type="text/css" rel="stylesheet"/>
	<link href="../../kr/co/softbowl/css/Sbgrid_default.css" type="text/css" rel="stylesheet"/>
	<link href="../../css/user_defined_sbgrid_style.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
    <script type="text/javascript" src="../../js/DATA_JSON_5000_people.js"></script>
	<script type="text/javascript">
		SBGrid.DEF.DOMAIN = "../../";
		var datagrid1;
			
		
		$(document).ready(function(){
			__createElements();
		});
		
		function __createElements (){
			var GridInitInfo = 	{
								"strParentId" : "sbGridArea",
								"strId": "datagrid1",
								"strCaption": "FirstName^LastName^Company^Address^City^County^State",
								"strColWidth": "100, 100, 250, 250, 180, 150, 70",
								"strJsonRef": "grid_data",
								"strStyle": "width:100%; height:280px; ",
								"strDataHeight":"29",
								"strBackColorAlternate" : "#f7f7f7",
								"strExtendLastCol" : "scroll"
							};
			var SBGridColumnInitInfo = [
								{ "id": "col1", "type": "output", "ref": "FirstName", "style": "text-align:left;padding-left:5px" },
								{ "id": "col2", "type": "output", "ref": "LastName", "style": "text-align:left;padding-left:5px" },
								{ "id": "col3", "type": "output", "ref": "Company", "style": "text-align:left;padding-left:5px" },
								{ "id": "col4", "type": "output", "ref": "Address", "style": "text-align:left;padding-left:5px" },
								{ "id": "col5", "type": "output", "ref": "City", "style": "text-align:center;" },
								{ "id": "col6", "type": "output", "ref": "County", "style": "text-align:center;" },
								{ "id": "col7", "type": "output", "ref": "State", "style": "text-align:center;" }
						];
			if(SBGrid.getGrid('datagrid1') != null){
				datagrid1.destroy();
				datagrid1 = null;				
			}
			
			datagrid1 = createSBGrid(GridInitInfo,SBGridColumnInitInfo);			
			
			datagrid1.vscroll.addEventListener("onscrollup","eventVScrollProcess","","");   
			datagrid1.vscroll.addEventListener("onscrolldown","eventVScrollProcess","",""); 
			datagrid1.hscroll.addEventListener("onscrollup","eventHScrollProcess","","");   
			datagrid1.hscroll.addEventListener("onscrolldown","eventHScrollProcess","",""); 
	
		}
		function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo){
			var objJSONdata = new Object();
			objJSONdata.objSBGridInitInfo = SBGridInitInfo;
			objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
			return SBGrid.DEF.createSBGrid(objJSONdata);
		};
		
        function softbowl_ready_model (event){
            model1_ready();
        };
     
        function eventVScrollProcess( event){
            var strEvent = event.currentTarget + ":" +event.name + " pos="+ datagrid1.vscroll.getScrollPosition() ;
            eventName.value =strEvent;
        };
        
        function eventHScrollProcess( event){
            var strEvent = event.currentTarget + ":" +event.name + " pos="+ datagrid1.hscroll.getScrollPosition() ;
            eventName.value =strEvent;
        };
       
	</script>
</head>
<body onload="__createElements()" class="sbgrid_body">
	
    <div id="sbGridArea"></div>
    </br>
    <textarea  id="eventName"  style="width:348px; height:90px; overflow:hidden"></textarea>
       
</body>
</html>