Creative Wrong Answer

데이터 그리드는 RIA 에서 빈번히 사용되는 컨트롤중 하나 이다.
관련된 이벤트도 많고 중요도도 높은 편이다.

데이터 그리드에서 editable = true 로 세팅 해주면 해당 칼럼을 그리드 내부에서 편집할 수 있다.
이것은 itemEditor를 통해서 가능해진다.

이 포스트에서는 특정 칼럼만 편집할 수 있도록 하고 몇가지를 더 추가 해서 완성하는 것을 해본다.

일단 mxml 부분 (태그 앞부분이 소문자로 나오는건 syntaxHighliter 때문이니 신경쓰지 않아도 된다)


	
		
			
				rinn
				퍼플린
				B
			
			
				magis
				들캔디
				A
			
			
				zzatung
				짝퉁
				??
			
		
	
	
		
			
			
			
		
	


아이디와 이름 혈액형을 model 로 데이터를 세팅하고 데이터 그리드에 바인딩 한다.
데이터 그리드에 연결되어있는 이벤트는 아래쪽에서 구현 예정이다.

아이디와 혈액형은 수시로 바뀌는게 아니기 때문에 여기서는 이름 필드만 편집 가능할 수 있도록 세팅 해보자.

여기서 사용 되는 것이 데이터그리드의 editedItemPosition 이다.
editedItemPosition property  
editedItemPosition:Object

The column and row index of the item renderer for the data provider item being edited, if any.

This Object has two fields, columnIndex and rowIndex, the zero-based column and row indexes of the item. For example: {columnIndex:2, rowIndex:3}

Setting this property scrolls the item into view and dispatches the itemEditBegin event to open an item editor on the specified item renderer.

The default value is null.

This property can be used as the source for data binding. When this property is modified, it dispatches the itemFocusIn event.


columnIndex와 rowIndex를 필드로 받고 아이템 에디트가 일어날때 그 값으로 세팅하게 되어있다.

아이템 에디트가 발생하게 되면 itemEditBegin 이벤트가 시작되고 이때 특정 칼럼만을 선택할 수 있도록 만들어준다.

private function dgEditBegin(e:DataGridEvent):void
{
	dg.editedItemPosition = {columnIndex:1, rowIndex:e.rowIndex};
}

columnIndex 를 1 로 고정하고 rowIndex 는 이벤트가 발생한 rowIndex 를 세팅 해주었으니 다른 칼럼을 선택하더라도 이름쪽만 에디트 될 수 있도록 바뀌게 된다.

하지만 매번 클릭시에 발생하게 되므로 사용하기에는 그리 모양새가 좋지 않다. 클릭 했을때는 해당 아이템이 선택되도록 하고 더블 클릭 했을때 수정 할 수있도록 수정하는것이 최종 목표이다.

더블 클릭을 사용할때 유의 할점은 일반 클릭도 함께 발생한다는 점이다.
마우스 클릭이 발생하게 되면 이게 더블클릭인지를 기다리는게 아니고 일단 마우스 이벤트는 진행이 되고 인터벌 안에 한번더 클릭이 들어오면 더블클릭으로 판단 하기 때문에 두가지 이벤트를 구분할수 있는 flag 를 세팅하고 아이템 에디트가 시작될때 클릭인지 더블클릭인지 확인하는 로직을 만들면 된다.

private var _isDClick:Boolean = false;

private function dgItemClick(e:ListEvent):void
{
	_isDClick = false;
}

private function dgDoubleClick(e:MouseEvent):void
{
	_isDClick = true;
}

private function dgEditBegin(e:DataGridEvent):void
{
	if(_isDClick)
		dg.editedItemPosition = {columnIndex:1, rowIndex:e.rowIndex};
	else
		e.stopImmediatePropagation();
}


isDClick 이라는 flag 를 itemClick 시에 false 로 세팅하고 doubleClick 시에 true 로 세팅해준다.
itemEditBegin 에서 flag 값에 따라서 이벤트를 블록 시킬 것인지 에디트를 진행할 것인지 결정하게 된다.



참고 사항

에디트 자체는 더블클릭일때만 활성화가 되지만 에디트를 하기 위해 더블클릭 하게 되면 itemClick 함수가 한번 실행 되게 된다.
이것을 클릭일때는 itemClick의 내용만 실행하고 더블 클릭일때는 에디트만 실행되도록 하기 위해서는 그냥 더블 클릭을 판단하는 로직자체를 타이머를 이용해서 구현하고 일반클릭일때는 더블클릭인지 판단하는 타이머가 끝날때 특정 행동을 수행하도록 수정해야 한다.

이 경우 그냥 클릭만 할때 바로 실행되지 않고 더블클릭인지 확인 하기 위해서 딜레이가 생기기 때문에 즉각적인 반응이 나오지 않아서 프로그램자체가 문제가 있지 않느냐는 평가를 받을 수도 있으므로 딜레이타임의 세팅에 세심한 주의가 필요하다.

이부분의 구현은 트랙백을 부탁한다.. -ㅅ-;;; 결코 귀찮아서가 아니다..;;


저작자 표시 비영리 동일 조건 변경 허락
신고

Comment +3

  • 이 포스트도 도움이 많이 되었습니다. 구글 검색하다보니 자꾸 이쪽 블로그로 오게 되네요.ㅋ
    밥이라도 한끼 사드려야 할듯..하군요..ㅋㅋ

    • 감사합니다 ㅎㅎ
      유입경로는 다 구글이더군요.
      다른 검색사이트(대표적으로 네이버)들은 자체 디비 검색을 우선하기 때문에 검색자체가 안되요

  • 신입개발자 2013.10.12 02:30 신고

    도움받아서 저도 글을 올립니다.
    많은 시간이 지나서 보실지 모르겠습니다.
    클릭 / dbl클릭의 구현에서 주기능은 타이머를 사용하지 않아도 됩니다.
    단지 그것을 위해서 사용하던 파라메터를 일정시간안에 초기화 해주는
    타이머 하나면 됩니다. 실제 컴퓨터에서 사용하는 더블클릭을 구현
    한다고 생각하면 편할듯 하고 이벤트는 ItemEditBegin을 이용하시면 일반 더블클릭과 동일한 결과물이 나옵니다.