Gird 이벤트 메커니즘_YUI.Ext 관련 입문서

원래 주소 기사 날짜: 2006/09/25/

YUI-EXT의 새 버전 .32에는 GIRD 이벤트 메커니즘에 대한 중요한 업그레이드가 포함되어 있습니다. 이제 많은 새로운 이벤트를 사용할 수 있으며 이벤트를 수신하는 메커니즘이 변경되었습니다(아직 이전 버전과 호환되지만).

이벤트 청취 방법

YAHOO.util.CustomEvent는 간단한 액세스만 제공하는 반면, Grid 및 관련 개체는 사용자가 익숙해야 하는 이벤트를 수신할 수 있는 새로운 메서드를 확장합니다. 그들은:

• addListener(eventName, fn, range, override) - "eventName"은 아래에 정의된 이벤트 중 하나여야 합니다. "fn"은 "scope"가 발생할 때 호출할 함수입니다. 함수의 범위(this)를 제공하는 선택적 개체입니다. "재정의"는 해당 범위를 적용할지 여부이며 이전 버전과의 호환성을 위해서만 존재합니다.
• removeListener(eventName, fn,scope) - 이전에 제출한 이벤트 리스너 제거
• on(eventName, fn, 범위, 재정의) - addListener 바로가기

이러한 메소드는 YAHOO.uitl.Event와 동일한 시그니처를 갖습니다.

OnRowSelect 이벤트 수신:

var sm = grid.getSelectionModel(); 
sm.addListener('rowselect', myHandler);

GIRD 노출 이벤트 목록 및 매개변수 소개는 다음과 같습니다.

- "this"는 그리드 개체를 나타냅니다.

- "e"는 YAHOO.ext.EventObject(정규화된 이벤트 개체)를 나타냅니다. 단, Drag & Drop 개체는 표준 브라우저 이벤트 개체입니다.

- "dd"는 Grid의 YAHOO.ext.GridDD 개체를 나타냅니다.

번역 참고: 독자들이 정확하게 이해할 수 있도록 다음과 같은 사건 설명을 원문에 제공합니다.

• cellclick - (this, rowIndex, columnIndex, e) - 셀을 클릭하면 실행됩니다.
• celldblclick - (this, rowIndex, columnIndex, e) - 셀을 두 번 클릭하면 실행됩니다.
• rowclick - (this, rowIndex, e) - 행을 클릭하면 실행됩니다.
• rowdblclick - (this, rowIndex, e) - 행을 두 번 클릭하면 실행됩니다.
• headerclick - (this, columnIndex, e) - 헤더를 클릭하면 실행됩니다.
• rowcontextmenu - (this, rowIndex, e) - 행을 마우스 오른쪽 버튼으로 클릭하면 실행됩니다.
• headercontextmenu - (this, columnIndex, e) - 헤더를 마우스 오른쪽 버튼으로 클릭하면 실행됩니다.
• beforeedit - (this, rowIndex, columnIndex, e) - 셀에서 편집이 시작되기 직전에 실행됩니다.
• afteredit - (this, rowIndex, columnIndex, e) - 셀이 편집된 직후에 실행됩니다.
• bodyscroll - (scrollLeft, scrollTop) - 그리드 본문이 스크롤될 때 실행됩니다.
• columnresize - (columnIndex, newSize) 사용자가 열 크기를 조정할 때 발생합니다.
• startdrag - (this, dd, e) - 행이 드래그되기 시작할 때 실행됩니다.
• enddrag - (this, dd, e) - 드래그 작업이 완료되면 실행됩니다.
• 드래그 드롭 - (this, dd, targetId, e) - 드래그된 행을 유효한 DD 대상에 놓으면 실행됩니다.
• dragover - (this, dd, targetId, e) 행이 드래그되는 동안 실행됩니다. "targetId"는 선택한 행이 드래그되는 Yahoo.util.DD 개체의 ID입니다. 위에.
• dragenter - (this, dd, targetId, e) - 드래그되는 동안 드래그된 행이 처음으로 다른 DD 타겟을 교차할 때 실행됩니다.
• 드래그아웃 - (this, dd, targetId, e) - 드래그하는 동안 드래그된 행이 다른 DD 타겟을 벗어날 때 실행됩니다.

기드 이벤트 예시

function onCellClick(grid, rowIndex, colIndex, e){  
 alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was clicked!'); 
 } 
 var grid = ... // 这里注册事件 grid.addListener('cellclick', onCellClick);

공통그리드 이벤트

그리드를 사용하여 수행할 수 있는 모든 작업을 구상할 방법이 없기 때문에 그리드의 여러 원시 이벤트에 대한 직접 액세스도 노출했습니다. 이러한 모든 이벤트는 하나의 매개변수인 "e"를 전달합니다. YAHOO.ext.EventObject.

• 클릭
• dbl클릭
• 마우스다운
• 마우스업
• 마우스 오버
• 마우스아웃
• 키 누르기
• 키다운

LoadableDataModel(XMLDataModel 및 JSONDataModel이 파생됨)은 유용한 새 이벤트를 선택했습니다.

beforeload - 모델이 원격 데이터 가져오기를 시작하기 직전에 실행됩니다.

이 이벤트를 load 이벤트와 결합하여 로딩 표시기를 숨기거나 표시할 수 있습니다.

var img = getEl('loading-indicator'); var dm = grid.getDataModel(); dm.addListener('beforeload', img.show, img, true); dm.addListener('load', img.hide, img, true);

이를 통해 새로운 이벤트 시스템을 시작하실 수 있기를 바랍니다. 질문이 있는 경우 언제든지 도움말 포럼에 게시해 주시면 도와드리겠습니다.

잭