[Flex] DataGrid과 DataGridColumn

DataGrid는 다음과 같이 간편하게 표형식의 데이터를 화면에 출력할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="{init()}" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" borderStyle="solid"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private var blogData:XML = <ROOT> <ITEM NAME="지돌스타" URL="http://blog.jidolstar.com" /> <ITEM NAME="열이아빠" URL="http://koko8829.tistory.com" /> <ITEM NAME="우야꼬" URL="http://www.as3.kr" /> <ITEM NAME="검쉰" URL="http://blog.flashplatform.kr" /> </ROOT>; private function init():void { myDG.dataProvider = blogData.ITEM; } ]]> </mx:Script> <mx:DataGrid id="myDG" left="10" right="10" top="10" height="128"> <mx:columns> <mx:DataGridColumn headerText="이름" width="100" dataField="@NAME"/> <mx:DataGridColumn headerText="주소" dataField="@URL"/> </mx:columns> </mx:DataGrid></mx:Application>

이런 DataGrid은 위의 코드에서 보실 수 있듯, DataGridColumn 을 이용하여 화면에 각 열을 생성하여 보여지게 됩니다. 데이터가 아무리 많이 들어오더라도 DataGridColumn이 지정되어 있지 않으면 출력되지 않죠. DataGridColumn은 가장 기본적으로 headerText, dataField 속성을 필요로 합니다.

headerText : DataGrid의 헤더(Header)에 출력될 문자열. 값이 지정되지 않을 경우 dataField의 값으로 사용합니다.
dataField : DataGrid에 입력된 데이터(DataProvider)에서 해당 열에 출력될 데이터를 지정.

위의 코드와 같이 MXML로 정의된 DataGridColumn의 정보(headerText 나 dataField, 혹은 넓이정보 등)를 변경하고자 한다면 어떻게 해야할까요? 방법은 여러가지일 수 있으나, 크게 본다면 1. DataGridColumn에 ID를 지정하여 해당 ID로 접근하거나 2. DataGrid의 columns 속성을 이용하여 DataGridColumn 모음을 받아와 처리하는 방법이 있을 수 있겠습니다.
이 포스트에서는 2번째 방법인 columns속성을 이용하는 것을 알아보도록 하겠습니다.

columns 속성은 DataGrid의 화면에 출력될 수 있는 하나 이상의 DataGridColumn들을 모아놓은 배열입니다. 이 배열에 담겨있는 DataGridColumn들을 수정하면 DataGrid의 모습도 바뀌게 된다는 것이죠.  특정 컬럼을 변경하고자 하면 이 배열의 해당 DataGridColumn에 대해 변경을 하면 반영이 되게 됩니다.

만약 위의 MXML처럼 ActionScript로 DataGridColumn을 설정하려 한다면 columns 속성에 직접 다음과 같이 DataGridColumn을 넣어주면 됩니다.
private function initDataGridColumn():void{ myDG.columns = [ makeDataGridColumn("@NAME", "이름", 100), makeDataGridColumn("@URL", "주소")];}private function makeDataGridColumn(dataField:String, headerText:String = "", width:int = 0):DataGridColumn{ var dgc:DataGridColumn = new DataGridColumn(dataField); if(headerText != "") dgc.headerText = headerText; if(width != 0) dgc.width = width; return dgc;}
makeDataGridColumn 이라는 DataGridColumn 객체를 반환하는 메소드를 이용하여 DataGrid의  columns 속성에 원하는 DataGridColumn을 배열로 담아 넣어주게 되면 처음에 보셨던 MXML에서 DataGridColumn을 지정하는 것과 같이 처리할 수 있게 되죠.

마지막으로 원하는 컬럼의 headerText 를 변경하는 예제를 만들어보고 이 포스트를 끝내도록 하겠습니다.
우선 원하는 컬럼을 선택하는 용도로 사용할 ComboBox를 생성 후, 컬럼에 대한 정보를 columns 속성을 이용하여 ComboBox에 넣도록 하겠습니다.
<mx:ComboBox x="10" y="146" width="91" id="cbLabel" labelField="label"/>private function init():void{ ... var columns:Array = myDG.columns; // 컬럼에 대한 정보를 가져옴 var c:int = columns.length; var cbData:Array = []; // 새로운 배열 생성 for (var i:int = 0; i < c; i++) cbData.push({index: i, label: DataGridColumn(columns[i]).headerText}); // 콤보박스에 넣을 데이터를 컬럼의 정보를 이용하여 생성 cbLabel.dataProvider = cbData;}

거기에 TextInput 과 Button을 생성하여 변경하고자 하는 문자열을 입력받고 동작할 수 있게 changeLabel 메소드를 추가합니다.
<mx:ComboBox x="10" y="146" width="91" id="cbLabel" labelField="label"/> <mx:TextInput x="109" y="147" id="txtLabel"/> <mx:Button x="277" y="147" label="바꾸기" click="{changeLabel(txtLabel.text)}"/>private function changeLabel(label:String):void{ var index:int = cbLabel.selectedItem.index; // 변경하고자 하는 컬럼의 index 정보를 가져옴 var targetColumn:DataGridColumn = myDG.columns[index]; // 해당 컬럼을 찾아냄. targetColumn.headerText = label; // txtInput에 입력한 대로 headerText를 변경함}

완성된 코드 및 SWF 파일입니다. ;)
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="{init()}" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" borderStyle="solid"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private var blogData:XML = <ROOT> <ITEM NAME="지돌스타" URL="http://blog.jidolstar.com" /> <ITEM NAME="열이아빠" URL="http://koko8829.tistory.com" /> <ITEM NAME="우야꼬" URL="http://www.as3.kr" /> <ITEM NAME="검쉰" URL="http://blog.flashplatform.kr" /> </ROOT>; private function init():void { myDG.dataProvider = blogData.ITEM; var columns:Array = myDG.columns; // 컬럼에 대한 정보를 가져옴 var c:int = columns.length; var cbData:Array = []; // 새로운 배열 생성 for (var i:int = 0; i < c; i++) cbData.push({index: i, label: DataGridColumn(columns[i]).headerText}); // 콤보박스에 넣을 데이터를 컬럼의 정보를 이용하여 생성 cbLabel.dataProvider = cbData; } private function changeLabel(label:String):void { var index:int = cbLabel.selectedItem.index; // 변경하고자 하는 컬럼의 index 정보를 가져옴 var targetColumn:DataGridColumn = myDG.columns[index]; // 해당 컬럼을 찾아냄. targetColumn.headerText = label; // txtInput에 입력한 대로 headerText를 변경함 } ]]> </mx:Script> <mx:DataGrid id="myDG" left="10" right="10" top="10" height="128"> <mx:columns> <mx:DataGridColumn id="ma" headerText="이름" width="100" dataField="@NAME"/> <mx:DataGridColumn headerText="주소" dataField="@URL"/> </mx:columns> </mx:DataGrid> <mx:ComboBox x="10" y="146" width="91" id="cbLabel" labelField="label"/> <mx:TextInput x="109" y="147" id="txtLabel"/> <mx:Button x="277" y="147" label="바꾸기" click="{changeLabel(txtLabel.text)}"/></mx:Application>

좋은 하루 보내세요~ ;)