[넥사크로] Grid

1. 구성 요소

1) Property

autofittype : 

autosizingtype : 

cellmovingtype : cell 위치 이동 속성(Column하면 Column이동 가능)

formats : band 고정할 때 

selecttype : 

2) Method

createFormat : 드래그&드롭으로 Grid를 자동으로 그려주는 메서드

setCellPos : Grid의 특정 Cell에 Focus를 이동하는 메서드

setCellProperty : Grid의 특정 Cell에 값을 Setting하는 메서드

updateToDataset : Grid내용을 Dataset에 바로 반영하는 메서드

3) Event

oncellclick : 

oncloseup : 

onexpandup : 

onheadclick : 

2. 실습

1) Column 정보와 Cell 정보 확인(1:1인지 병합된 Cell인지 차이 확인가능)

this.btn_Exe1_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var nColCnt1  = this.Grid1.getFormatColCount();

var nCellCnt1 = this.Grid1.getCellCount("body");

 

var nColCnt1_1  = this.Grid1_1.getFormatColCount();

var nCellCnt1_1 = this.Grid1_1.getCellCount("body");

 

trace("Grid1 Col=" + nColCnt1 + " : Cell=" + nCellCnt1);

trace("Grid1_1 Col=" + nColCnt1_1 + " : Cell=" + nCellCnt1_1);

};

this.Grid_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

trace(" e.col=" + e.col + " : e.cell=" + e.cell);

        // Merge시 A big Cell : 일반적인 병합 / having child cell : 각자 요소는 가지고 구분선만 제거(alt 클릭 => 각각 선택 가능)

};

2) Cell에 바인딩 된 Dataset 컬럼 ID 확인

this.btn_Exe1_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var nCellCnt = this.Grid1.getCellCount("body");

for(var i=0; i<nCellCnt; i++)

{

                // getCellProperty : Property에 입력되 있는 정보 가져오기

var sColID = this.Grid1.getCellProperty("body", i, "text");

trace(sColID);

var arrCol = sColID.split(":");

trace("ColumnID=" + arrCol[1]);

}     

};

 

// headCell 클릭시 각 cell 기준으로 내림차순 진행

this.Grid1_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

        var sColId = obj.getCellProperty("body", e.cell, "text").split(":");

        var objDs = obj.getBIndDataSet();

        trace(sColId + "--------" + sColId[1]);

        objDs.set_keystring("S:+" + sColId[1]);

        // this.fn_sort(obj,e); // 아래 메서드 사용

};

=========================================================

cf) 메서드화(한번 클릭하면 내림차순 다시 누르면 오름차순으로 변경됨)

 

this.CONST_NONE_MARK = "";

this.CONST_ASC_MARK = "↑";

this.CONST_DESC_MARK = "↓";

this.nPrevCell = -1;

this.fn_sort = function (obj:Grid, e:GridClickEventInfo)

{

    if(obj.getCellProperty("head", e.cell, "displaytype") == "checkboxcontrol") return;

var objDs     = obj.getBindDataset();

var sColId    = obj.getCellProperty("body", e.cell, "text").split(":");

var sHeadText = obj.getCellText(-1, e.cell);

 

if(sHeadText.substr(sHeadText.length-1) == this.CONST_ASC_MARK){

obj.setCellProperty("head", e.cell, "text", sHeadText.substr(0, sHeadText.length - 1) + this.CONST_DESC_MARK);

objDs.set_keystring("S:-" + sColId[1]);

}

else if(sHeadText.substr(sHeadText.length-1) == this.CONST_DESC_MARK){

obj.setCellProperty("head", e.cell, "text", sHeadText.substr(0, sHeadText.length - 1) + this.CONST_ASC_MARK);

objDs.set_keystring("S:+" + sColId[1]);

}

else{

obj.setCellProperty("head", e.cell, "text", sHeadText + this.CONST_ASC_MARK);

objDs.set_keystring("S:+" + sColId[1]);

}

 

if(this.nPrevCell > -1 && this.nPrevCell != e.cell){

var sPrevText = obj.getCellText(-1, this.nPrevCell);

obj.setCellProperty("head", this.nPrevCell, "text", sPrevText.substr(0, sPrevText.length - 1));

}

 

this.nPrevCell = e.cell;

}

=========================================================

3) Dataset에 Column추가 후 Grid 맨 앞쪽에 빈 Column추가 후 바인딩

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Dataset2.addColumn("COL_CHK", "STRING", 1);

        this.Dataset2.set_enableevent(false);

for(var i=0; i<this.Dataset2.rowcount; i++){

this.Dataset2.setColumn(i, "COL_CHK", "0");

}

        this.Dataset2.set_enableevent(true);

 

this.Grid2.insertContentsCol("body", 0);

this.Grid2.setCellProperty("body", 0, "text", "bind:COL_CHK");

    

};

4) 특정 Column Head와 Body Cell을 checkbox형태로 표현

this.btn_Exe2_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Grid2.setCellProperty("body", 0, "displaytype", "checkboxcontrol");

this.Grid2.setCellProperty("body", 0, "edittype"   , "checkbox");

 

this.Grid2.setCellProperty("head", 0, "displaytype", "checkboxcontrol");

this.Grid2.setCellProperty("head", 0, "edittype"   , "checkbox");

};

// head누르면 전체 선택, 전체 해제 기능

this.Grid2_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

if(e.cell == 0){

            var nValue = this.Grid2.getCellText(-1,0); // -1 : Head / -2 : Summary

            nValue = (nValue == "1" ? "0" : "1");

            this.Dataset2.set_enableevent(false);

            for( var i = 0 ; i < this.Dataset2.rowcount ; i++ ){

                this.Dataset2.setColumn(i, "COL_CHK", nValue);

            }

            this.Dataset2.set_enableevent(true);

            //Head

            this.Grid2.setCellProperty("Head", 0, "text", nValue);

        }

};

 

this.Dataset2_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo)

{

if(e.columnid == "COL_CHK"){

 

        }

};

5) Column 이동 및 size 변경

this.btn_Exe3_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Grid3.set_cellmovingtype("col");

this.Grid3.set_cellsizingtype("col");

};

6) 스크롤 고정

this.btn_Exe3_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

//Column Fix

this.Grid3.setFormatColProperty(2, "band", "left");

 

//Row Fix

this.Grid3.setFixedRow(2);

};

7) 스크롤 고정 해제

this.btn_Exe3_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

for(var i=0; i<this.Grid3.getFormatColCount(); i++){

this.Grid3.setFormatColProperty(i, "band", "body");

}

 

this.Grid3.setFixedRow(-1);

};

8) Size변경

this.btn_Exe3_4_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Grid3.setFormatColProperty(2, "size", 100);

this.Grid3.setFormatColProperty(5, "size", 0); // 사이즈를 0으로 숨김처럼 사용

};

// 이렇게 하면 Export하면 노출되니 사용하지 말자
// 교육에서는 그리드를 복사해서 Export용으로 하나 만들라는데 이게 맞는거냐

this.btn_Exe3_5_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Grid3.setFormatColProperty(5, "size", 80);

};

 

this.Grid3.arrHide = [];

this.Grid3_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

    // getRealColSize()

};

 

this.btn_Cancel_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

 

};

9) 원본 그리드 포맷과 현재 변경한 그리드 포맷 비교 => 변경 저장 및 초기화

this.btn_Exe3_6_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var sCurFormat = this.Grid3.getCurFormatString();

this.Grid3_1.set_formats("<Formats>" + sCurFormat + "</Formats>");

 

  var sOrgFormat = this.Grid3.getCurFormatString(true);

this.Grid3_2.set_formats("<Formats>" + sOrgFormat + "</Formats>");

};

10) 그리드를 트리형태로 표현 => Dataset에 Depth가 적용되어 있어야 함

this.Grid4_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

var nGridRow = this.Grid4.getTreeRow(e.row);

var nStatus  = this.Grid4.getTreeStatus(nGridRow);

trace("e.row=" + e.row + " : TreeRow=" + nGridRow + " : Status=" + nStatus);

 

if(nStatus == 3) return; // 0 : 닫힘, 1 : 펼침, 3 : 단말 노드

nStatus = (nStatus == 0 ? 1 : 0);

 

this.Grid4.setTreeStatus(nGridRow, nStatus);

 

};

// 트리형태의 디자인적인 요소는 속성에서 CellTreeItem에서 설정 가능(펼침 여부, 체크박스 여부 등)

11) Grouping하여 소계 및 합계

this.btn_Exe5_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Dataset5.set_keystring("G:-CORP,+DEPT");

var sExpr = "expr:(dataset.getRowLevel(currow) == 2 ? CORP+' Sum' : CORP)";

this.Grid5.setCellProperty("body", 0, "text", sExpr);

sExpr = "expr:(dataset.getRowLevel(currow) == 0 ? DEPT : (dataset.getRowLevel(currow) == 1 ? DEPT + ' Sum' : ''))";

this.Grid5.setCellProperty("body", 1, "text", sExpr);

};

12) 합계 구하기

this.btn_Exe5_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

// 합계

        this.Grid5.appendContentsRow("summary");

this.Grid5.setCellProperty("summary", 4, "text", this.Dataset5.getSum("SALARY"));

};

13) Summary위치 이동

this.btn_Exe5_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Dataset5.set_reversesubsum(true);

this.Grid5.set_summarytype("top");

};

//??? 실습 없음

this.btn_Exe6_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Grid6.setCellProperty("body", 0, "treelevel", "expr:comp.parent.fn_level(dataset.getRowLevel(currow))");

this.Grid6.setCellProperty("body", 0, "displaytype", "treeitemcontrol");

this.Grid6.setCellProperty("body", 0, "edittype", "tree");

this.Grid6.setCellProperty("body", 0, "text", "expr:(dataset.getRowLevel(currow) == 2 ? CORP : (dataset.getRowLevel(currow) == 1 ? DEPT : NAME))");

 

this.Grid6.setFormatColProperty(1, "size", 0);

this.Grid6.setFormatColProperty(2, "size", 0);

};

 

this.fn_level = function(pRow)

{

var nMaxLevel = 2;

var nLevel = nMaxLevel-pRow;

return nLevel;

}

14) 디자인 되지 않은 그리드 공간 채우기

// autoenter 속성이 select 인 경우 한번에 그리드에서 콤보와 캘린더를 표현하는 방법

this.Grid2_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

if(e.col == 2){

this.Grid2.dropdownCombo();

}else if(e.col == 3){

this.Grid2.dropdownCalendar();

}

};

=========================================================

// autofittype - 전체 Column이 표시되도록 Column의 너비를 자동조절할지 설정하는 속성입니다.

// grid format 변경 - Grid2 안에 formatid를 복사하여 생성 할 수 있습니다.

// selecttype - Grid 에서 선택되는 단위를 설정하는 속성입니다.

// autosizingtype - Grid 에 데이터가 모두 표시되도록 Row, Column 의 크기를 자동조절 할 지 설정하는 속성입니다. 

// fastvscrolltype : 스크롤위치만 클로즈업함 = "centerdisplay" - 속성 변경 후 실행화면의 그리드 스크롤 속도 확인

=========================================================

// this.Grid00.updateToDataset(); // 편집중인 값을 Dataset에 즉시 반영 (없다면 enter를 눌러야 수정됨)

 this.Grid2_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)

 {

obj.updateToDataset();

 };