- Grid > 컬럼 추가/생성
enableredraw 속성이 마지막에 있는 것은 실제 그리드에 영향을 미치는 부분 바로 앞에서 실행하기 때문입니다.
업무화면을 딱 정해진대로만 그릴 수 있다면 얼마나 좋을까요?
하지만 사용자가 직접 정의한 화면을 보여주어야 할 수도 있고
조건에 따라 다른 화면을 보여주어야 할 수도 있습니다.
하지만 그렇다고 각 경우의 수를 고려해서 화면을 그려주어야 한다면
아마 지금 하고 있는 작업의 수십배는 더 일을 해야 할겁니다.
RIA 구현의 장점 중 하나가 이런 동적인 화면 추가/생성이
비교적 용이하다는 것입니다.
하지만 개발자는 힘들다는거..^^
일단 아래 그림과 같은 상황에서 빨간색 영역에 새로운 컬럼을 추가해야 합니다.
이런 경우에 어떻게 하는지 살펴보겠습니다.
코드를 살펴보죠.
쇼케이스에 있는 코드를 그대로 가져온겁니다.
function Button01_onclick(obj:Button, e:ClickEventInfo){Grid00.enableredraw = false;// 추가할 컬럼 셋팅// 사이에 추가시 insertContentsCol// 끝에 추가시 appendContentsColGrid00.insertContentsCol(2);Grid00.setFormatColProperty(2,"size",80);Grid00.setCellProperty("head", 2, "text", "New");Grid00.setCellProperty("body", 2, "text", "bind:Column2");
// 추가할 컬럼의 displaytype, edittype 설정도 하여야 한다. 기본은 normal, noneGrid00.setCellProperty("body", 2, "displaytype", "normal");Grid00.setCellProperty("body", 2, "edittype", "none");Grid00.enableredraw = true;}
enableredraw 속성은 거의 대부분의 컴포넌트에서 제공하고 있습니다.
동적으로 무언가 추가되거나 변경될때 컴포넌트를 다시 그려주게 되는데
설정이 완료될때까지 다시 그리기를 보류시키고 작업이 끝나면서 일괄적으로 처리되도록
변경 내역 앞뒤에 설정해주게 됩니다.
컬럼 추가는 insertContentsCol() 을 사용합니다. 2라는 숫자는 삽입될 컬럼의 index를 의미합니다.
추가가 되면서 해당 컬럼의 index 값이 되겠죠.
이후에 사용되는 index 값은 insertContentsCol()의 반환값을 사용해도 되고 이미 알고 있다면 해당 값을 사용하면 됩니다.
예제에서는 2 라는 숫자를 계속 사용했네요.
설정에서 크기는 그리드에서 autofittype을 어떻게 설정했는지에 따라 달라집니다.
설정을 하지 않았다면 지정된 크기로 들어갈 수 있지만 자동설정이 되어있다면 알아서 크기가 조정됩니다.
데이터셋만 가지고 그리드 구현하기
- UX 스튜디오에서는 그리드에 데이터셋을 가져다놓으면 알아서 바인딩을 하면서 알아서 포맷을 지정해줍니다.
하지만 동적인 경우에는 그렇게 하기가 어렵죠.
때문에 수작업으로 그리드 컬럼과 포맷을 지정해주어야 합니다.
일단 데이터셋이 있기 때문에 항목은 getColCount(), getColID()를 사용해서 가져올 수 있습니다.
for (var i = 0; i < ds_Type_B.getColCount(); i++){// Column ID 추출v_ColId = ds_Type_B.getColID(i);// Column 생성v_Columns += '<Column size="120" />\n';
// Head 생성v_BandHead += '<Cell col="' + i.toString() + '" text="' + v_ColId + '"/>\n';// Body 생성v_BandBody += '<Cell col="' + i.toString() + '" text="bind:' + v_ColId + '"/>\n';}
해당 속성이 XML 형식으로 들어가기 때문에 그냥 문자열로 만들어줍니다.
그리고 필요한 태그 안에 삽입을 시켜주는 거죠.
v_Rows += '<Row size="24" band="head" fix="fixed"/>\n';v_Rows += '<Row size="20"/>\n';
v_Formats = '<Formats>\n';v_Formats += '<Format id="default">\n';v_Formats += '<Columns>\n';v_Formats += v_Columns;v_Formats += '</Columns>\n';v_Formats += '<Rows>\n';v_Formats += v_Rows;v_Formats += '</Rows>\n';v_Formats += '<Band id="head">\n';v_Formats += v_BandHead;v_Formats += '</Band>\n';v_Formats += '<Band id="body">\n';v_Formats += v_BandBody;v_Formats += '</Band>\n';v_Formats += '</Format>\n';v_Formats += '</Formats>\n';Grid02.enableredraw = false;Grid02.binddataset = ds_Type_B;Grid02.formats = v_Formats;Grid02.enableredraw = true;Grid02.autofittype = "col";
하지만 저렇게 하나하나 XML 형태로 만들어서 포맷을 지정해주는 것이 조금은 복잡하죠.
조금 다른 형식으로 접근할 수도 있습니다.
function Button03_onclick(obj:Button, e:ClickEventInfo){//Grid 동적생성 scriptvar objGrid = new Grid();objGrid.init("Grid03", 0, 0, 0, 0);objGrid.fillareatype = "allrow";objGrid.position = "absolute 384 280 747 410";// Add Object to Parent Formthis.addChild("Grid03", objGrid);
//addChild 이후 호출해야 정상동작함.objGrid.createFormat();// Show ObjectobjGrid.show();var objDs = eval("ds_Type_B");objGrid.binddataset = objDs;//head/body/summ 영역구성objGrid.appendContentsRow("head");objGrid.appendContentsRow("body");//col생성 - appendContentsRow() 에서 컬럼이 기본으로 1개 생김for(var r=1; r<objDs.getColCount(); r++){objGrid.appendContentsCol();}//col size 설정for(var r=0; r<objDs.getColCount(); r++){objGrid.setFormatColProperty(r,"size",100);}//band별 셀속성 설정for(var r=0; r<objDs.getColCount(); r++){var colinfo = objDs.getColumnInfo(r);objGrid.setCellProperty("head",r,"text",colinfo.name);objGrid.setCellProperty("body",r,"text","bind:"+ colinfo.name);}Grid03.autofittype = "col";}
소스를 좀 살펴보면 이번에는 아예 그리드부터 새로 만들고 있습니다.
그리드 옵션에서 fillareatype 는 데이터가 없는 영역을 어떻게 표시할지 설정하는 속성입니다.
기본값은 none 입니다. 데이터가 없는 영역은 표시하지 않습니다.
allrow로 설정하게 되면 일단 모두 다 그려주게 됩니다.
추가적인 편집이 있는 경우에는 allrow로 설정하는 것이 좀 더 직관적일 수 있겠죠.
createFormat()을 사용하는 부분은 좀 의문스럽긴 합니다.
없어도 무관한것 같기도 하고 이론적으로는 createFormat()에서 알아서 처리가 되어야 하는데...
이후 단계는 그리드 에디터에서 하는 작업과 동일합니다.
심지어는 appendContentsRow()에서 기본 컬럼을 생성해주는 것도 동일하네요.