- Grid > Data행을 종으로 표현
음 제목만 보면 딱 이해가 안되기 때문에 그림으로 보도록 하겠습니다.
잘 보이시나요. ㅠㅠ 색을 다르게 할걸 그랬나 봅니다.
하여간 그리드에서 선택한 행의 데이터를 클릭하게 되면 팝업 형태로 보여주는 예제입니다.
잘 보시면 column1의 정보가 다른데 뒤에 있는 그리드에서는 combo 타입을 사용한 것이고
팝업에서는 원래 데이터를 보여준 차이가 있습니다.
이 예제에서는 클릭시 팝업을 띄우는 기법 - 여기에는 팝업 윈도우를 생성하고 위치를 잡는 과정이 들어갑니다.
그리고 선택 행의 데이터를 가져와서 해당 데이터를 그리드로 표현하는 과정이 포함됩니다.
아래 함수는 그리드에서 셀더블클릭 이벤트가 발생했을때 연결되는 함수입니다.
function gfn_ViewRowList(oGrid:Grid, e:GridClickEventInfo, pbSave){if(pbSave == null) pbSave = true;oPdiv = _create(oGrid, e, pbSave);var oRect = oGrid.getCellRect(e.row, e.col);var nX = system.clientToScreenX(oGrid, oRect.left);var nY = system.clientToScreenY(oGrid, oRect.top + oRect.height);
oPdiv.trackPopup(nX, nY);}
getCellRect() 메소드는 지정된 셀의 정보를 가져오는 메소드라고 합니다.
클릭 이벤트에서 클릭된 row와 col의 정보를 가져올 수 있기 때문에 해당 정보를 처리할 수 있습니다.
이렇게 가져온 정보는 Rect Object 형태로 반환됩니다.
Rect는 bottom, height, left, right, top, width 의 정보를 가지고 있는 영영 좌표를 지정하는 오브젝트입니다.
예제에서 _create 함수는 PopupDiv 를 생성해주는 부분입니다.
여기서 PopupDiv 를 생성하고 데이터를 추출하고 그리드를 만드는 작업을 같이 진행을 합니다.
PopupDiv는 일반적인 Div와 동일하지만 포커스를 잃게 되면 자동으로 사라지게 됩니다.
지속적으로 참조할 데이터가 아니라 일시적으로 확인해야 하는 정보를 인용할때 사용됩니다.
<font class="Apple-style-span" color="#666666"></font>objPopupDiv = new PopupDiv();objPopupDiv.init(sName, 0, 0, 240, 120);objPopupDiv.text = sName;
// Add Object to Parent Formthis.addChild(sName, objPopupDiv);// Show ObjectobjPopupDiv.show();
동적으로 PopupDiv를 생성하는 과정입니다.
새로운 객체를 만들고 초기화하고 폼에 넣어주고 보여줍니다.
PopupDiv 에서 text 속성은 내부 컴퍼넌트가 없는 경우에 기본적으로 보여주는 텍스트라고 합니다.
그리드를 만드는 부분은 앞에서 다룬적이 있으니 생략하고
데이터를 생성하는 부분만 살펴보겠습니다.
//데이타셋 생성function _createDataset(oGrid:Grid, e:GridClickEventInfo, pbSave){var oDsData = eval(oGrid.binddataset);var oDsRowViw = all["_dstTmpRow"];if(oDsRowViw == null){oDsRowViw = new Dataset;oDsRowViw.name = "_dstTmpRow";oDsRowViw.addColumn("COL_TITLE","String");oDsRowViw.addColumn("COL_VAL","String");}oDsRowViw.clearData();var nRow, nSt;var sVal;if(pbSave) nSt = 3;else nSt = 1;// 타이틀 정보 담기for(var i=nSt; i<oGrid.getCellCount("head"); i++){sVal = oGrid.getCellProperty("head", i, "text");nRow = oDsRowViw.addRow();oDsRowViw.setColumn(nRow, "COL_TITLE", sVal);}var sColid;var nIdx = 0;// 값정보 담기for(var i=nSt; i<oGrid.getCellCount("body"); i++){sColid = oGrid.getCellProperty("body", i, "text").split(":")[1];sVal = oDsData.getColumn(e.row, sColid);oDsRowViw.setColumn(nIdx, "COL_VAL", sVal);nIdx++;}return oDsRowViw;}
데이터셋을 만드는 과정은 UX 스튜디오에서 만드는 과정과 동일합니다.
먼저 이름을 정해주고 컬럼을 추가합니다.
그리고 값을 담아줍니다.
예제에서 하고자 하는 것은 선택한 그리드의 행 정보를 가져와 보여주는 것이기 때문에
그리드에서 head 정보를 가져와 데이터를 추가해주고 body에 있는 정보를 가져와 보여줍니다.
그리드에서 getCellProperty() 메소드로 text 속성을 가져오면 'bind:Column0'와 같은 식으로 데이터를 반환합니다.
때문에 split() 메소드로 실제 컬럼값만 가져와서 컬럼의 데이터값을 가져와 새로운 데이터셋에 넣어줍니다.
이를 활용하면 데이터 그리드가 아니라도 간단한 양식으로 정보를 보여줄 수도 있고
다양하게 활용할 수 있지 않을까 싶습니다.
마지막으로 PopupDiv 를 화면에 보여주기 위해서 trackPopup() 메소드를 실행합니다.
trackPopup() 메소드는 좌표값을 가지게 되고 실행되면서 visible 속성을 true 로 설정해준다고 합니다.
그리고 모니터 영역을 벗어나는 경우에는 자동으로 보정을 해준다고 합니다.