[AS] 플래시 fl.controls.DataGrid 관련

ADOBE/ ActionScript

[AS] 플래시 fl.controls.DataGrid 관련

AlrepondTech 2020. 9. 19. 07:55

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

단계별 모음
출처: http://kirill-poletaev.blogspot.com/2011/01/as3-datagrid-component-part-1.html

As you can see, there are a lot of pre-built functions for this component, such as sorting, item selecting (multiple item selecting), configurable column widths, vertical and horizontal scroll bars, and more.

Let's try making one. First, put the DataGrid component on stage from your Components menu and give it an instance name of "myGrid".

Now, let's start writing our code. Firstly, we move it to our desired position and set sizes:

myGrid.move(10,10); myGrid.setSize(300, 100)

The next thing we want to do is to create the header - the first row in the whole table. I'm creating a userbase data grid, so my columns will be called Name, Age and Job.

myGrid.columns = ["Name", "Age", "Job"];

Now we can set the width of these columns:

myGrid.columns[0].width = 100; myGrid.columns[1].width = 50; myGrid.columns[2].width = 150;

Then we create the array of our data. Make sure that the parameters in the array object equal the names of the columns:

var myData:Array = [{Name: "John Jenkins", Age: "31", Job: "Shop manager"},
{Name: "Anna Watson", Age: "28", Job: "Doctor"},
{Name: "Susan McCallister", Age: "29", Job: "Chef"},
{Name: "Joe Thompson", Age:"32", Job: "Janitor"},
{Name: "Bob Anderson", Age:"31", Job: "Bank assistant"}];

Finally, we apply this array to the grid's data provider:

myGrid.dataProvider = new DataProvider(myData);

Full code:

import fl.data.DataProvider;

myGrid.move(10,10);
myGrid.setSize(300, 100);
myGrid.columns = ["Name","Age","Job"];

myGrid.columns[0].width = 100;
myGrid.columns[1].width = 50;
myGrid.columns[2].width = 150;

var myData:Array = [{Name: "John Jenkins", Age: "31", Job: "Shop manager"},
{Name: "Anna Watson", Age: "28", Job: "Doctor"},
{Name: "Susan McCallister", Age: "29", Job: "Chef"},
{Name: "Joe Thompson", Age:"32", Job: "Janitor"},
{Name: "Bob Anderson", Age:"31", Job: "Bank assistant"}];

myGrid.dataProvider = new DataProvider(myData);

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

출처: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa8.html
import fl.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility();

You enable accessibility for a component only once, regardless of how many instances the component has. For more information, see Chapter 18, “Creating Accessible Content,” in Using Flash .

DataGrid component parameters

You can set the following authoring parameters in the Property inspector or in the Component inspector for each DataGrid component instance: allowMultipleSelection , editable , headerHeight , horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrolllPolicy , resizableColumns , rowHeight , showHeaders , verticalLineScrollSize , verticalPageScrollSize , and verticalScrollPolicy . Each of these parameters has a corresponding ActionScript property of the same name. For information on the possible values for these parameters, see the DataGrid class in the ActionScript 3.0 Language and Components Reference .

Create an application with the DataGrid component

To create an application with the DataGrid component, you must first determine where your data is coming from. Typically, data comes from an Array, which you can pull into the grid by setting the dataProvider property. You can also use the methods of the DataGrid and DataGridColumn classes to add data to the grid.

Use a local data provider with a DataGrid component:

This example creates a DataGrid to display a softball team’s roster. It defines the roster in an Array ( aRoster ) and assigns it to the DataGrid’s dataProvider property.

In Flash, select File > New, and then select Flash File (ActionScript 3.0).
Drag the DataGrid component from the Components panel to the Stage.
In the Property inspector, enter the instance name aDg .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.data.DataProvider; 
 
bldRosterGrid(aDg); 
var aRoster:Array = new Array(); 
aRoster = [ 
        {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},  
        {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"}, 
        {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"}, 
        {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}, 
        {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"}, 
        {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"}, 
        {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"}, 
        {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"}, 
        {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}, 
        {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"}, 
        {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"}, 
        {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"}, 
        {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"}, 
]; 
aDg.dataProvider = new DataProvider(aRoster); 
aDg.rowCount = aDg.length; 
 
function bldRosterGrid(dg:DataGrid){ 
    dg.setSize(400, 300); 
    dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; 
    dg.columns[0].width = 120; 
    dg.columns[1].width = 50; 
    dg.columns[2].width = 50; 
    dg.columns[3].width = 40; 
    dg.columns[4].width = 120; 
    dg.move(50,50); 
};

The bldRosterGrid() function sets the size of the DataGrid and sets the order of the columns and their sizes.

5. Select Control > Test Movie.

Specify columns and add sorting for a DataGrid component in an application

Notice that you can click any column heading to sort the DataGrid’s content in descending order by that column’s values.

The following example uses the addColumn() method to add DataGridColumn instances to a DataGrid. The columns represent player names and their scores. The example also sets the sortOptions property to specify the sort options for each column: Array.CASEINSENSITIVE for the Name column and Array.NUMERIC for the Score column. It sizes the DataGrid appropriately by setting the length to the number of rows and the width to 200.

In Flash, select File > New, and then select Flash File (ActionScript 3.0).
Drag the DataGrid component from the Components panel to the Stage.
In the Property inspector, enter the instance name aDg .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.data.DataProvider; 
 
bldRosterGrid(aDg); 
var aRoster:Array = new Array(); 
aRoster = [ 
        {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},  
        {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"}, 
        {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"}, 
        {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}, 
        {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"}, 
        {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"}, 
        {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"}, 
        {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"}, 
        {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}, 
        {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"}, 
        {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"}, 
        {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"}, 
        {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"}, 
]; 
aDg.dataProvider = new DataProvider(aRoster); 
aDg.rowCount = aDg.length; 
 
function bldRosterGrid(dg:DataGrid){ 
    dg.setSize(400, 300); 
    dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; 
    dg.columns[0].width = 120; 
    dg.columns[1].width = 50; 
    dg.columns[2].width = 50; 
    dg.columns[3].width = 40; 
    dg.columns[4].width = 120; 
    dg.move(50,50); 
};

5.Select Control > Test Movie.

Create a DataGrid component instance using ActionScript

This example creates a DataGrid using ActionScript and populates it with an Array of player names and scores.

Create a new Flash (ActionScript 3.0) document.
Drag the DataGrid component from the Components panel to the current document’s Library panel.
This adds the component to the library but doesn’t make it visible in the application.
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aDg:DataGrid = new DataGrid(); 
addChild(aDg); 
aDg.columns = [ "Name", "Score" ]; 
aDg.setSize(140, 100); 
aDg.move(10, 40);

This code creates the DataGrid instance and then sizes and positions the grid.

4. Create an array, add data to the array, and identify the array as the data provider for the DataGrid:

var aDP_array:Array = new Array(); 
aDP_array.push({Name:"Clark", Score:3135}); 
aDP_array.push({Name:"Bruce", Score:403}); 
aDP_array.push({Name:"Peter", Score:25}); 
aDg.dataProvider = new DataProvider(aDP_array); 
aDg.rowCount = aDg.length;

5. Select Control > Test Movie.

Load a DataGrid with an XML file

The following example uses the DataGridColumn class to create the DataGrid’s columns. It populates the DataGrid by passing an XML object as the value parameter of the DataProvider() constructor.

Using a text editor create an XML file with the following data and save it as team.xml in the same folder where you will save the FLA file.<team> <player name="Player A" avg="0.293" /> <player name="Player B" avg="0.214" /> <player name="Player C" avg="0.317" /> </team>
Create a new Flash (ActionScript 3.0) document.
In the Components panel, double-click the DataGrid component to add it to the Stage.
In the Property inspector, enter the instance name aDg .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.dataGridClasses.DataGridColumn; 
import fl.events.DataGridEvent; 
import fl.data.DataProvider; 
// Create columns to enable sorting of data. 
var nameDGC:DataGridColumn = new DataGridColumn("name"); 
nameDGC.sortOptions = Array.CASEINSENSITIVE; 
var scoreDGC:DataGridColumn = new DataGridColumn("score"); 
scoreDGC.sortOptions = Array.NUMERIC; 
aDg.addColumn(nameDGC); 
aDg.addColumn(scoreDGC); 
var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25}) 
aDg.dataProvider = new DataProvider(aDP_array); 
aDg.rowCount = aDg.length; 
aDg.width = 200;

6. Select Control > Test Movie.

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

출처: http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/fl/controls/DataGrid.html

구현
public function get columns():Array
public function set columns(value:Array):void

예제 ( 예제 사용 방법 )

다음 예제에서는 columns 배열을 사용하여 데이터 격자에 새 열을 추가합니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 16;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getRandomNumber(), col2:getRandomNumber(), col3:getRandomNumber(), col4:getRandomNumber()});
}

var dg:DataGrid = new DataGrid();
dg.setSize(200, 300);
dg.columns = ["col1", "col2", "col3"];
dg.dataProvider = dp;
addChild(dg);

function getRandomNumber():uint {
    return Math.round(Math.random() * 100);
}

다음 예제에서는 새 DataGrid를 채우고 columns 배열과 getColumnCount() 메서드를 모두 사용하여 열 수를 반환합니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 16;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getRandomNumber(), col2:getRandomNumber(), col3:getRandomNumber(), col4:getRandomNumber()});
}

var dg:DataGrid = new DataGrid();
dg.setSize(200, 300);
dg.columns = ["col1", "col2", "col3"];
dg.dataProvider = dp;
addChild(dg);

trace("columns.length:", dg.columns.length); // 3
trace("getColumnCount():", dg.getColumnCount()); // 3

function getRandomNumber():uint {
    return Math.round(Math.random() * 100);
}

editable

속성

public var editable:Boolean = false

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 데이터 공급자의 항목을 편집할 수 있는지 여부를 나타냅니다. true 값은 사용자가 데이터 공급자의 항목을 편집할 수 있음을 나타내고, false 값은 사용자가 해당 항목을 편집할 수 없음을 나타냅니다.

이 값이 true이면 구성 요소의 항목 렌더러를 편집할 수 있습니다. 사용자가 항목 렌더러를 클릭하여 편집기를 열 수 있습니다.

DataGrid 구성 요소의 개별 열에 대한 편집 기능은 DataGridColumn.editable 속성을 사용하거나 itemEditBeginning 및 itemEditBegin 이벤트를 처리하여 해제할 수 있습니다.

기본값: false.

editedItemPosition

속성

editedItemPosition:Object

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

현재 편집 중인 데이터 공급자에 대해 항목 렌더러의 열 및 행 인덱스를 가져오거나 설정합니다. 편집 중인 항목이 없는 경우 이 속성은 null입니다.

이 객체에는 두 개의 필드가 있습니다.

columnIndex: 현재 항목의 0부터 시작하는 열 인덱스
rowIndex: 현재 항목의 0부터 시작하는 행 인덱스

예를 들어 { columnIndex:2, rowIndex:3 }과 같습니다.

이 속성을 설정하면 항목이 뷰로 스크롤되고 지정한 항목 렌더러에서 항목 편집기를 여는 itemEditBegin 이벤트가 전달됩니다.

기본값: null.

구현
public function get editedItemPosition():Object
public function set editedItemPosition(value:Object):void

관련 API 요소

itemEditBegin

예제 ( 예제 사용 방법 )

다음 예제에서는 사용자가 행과 열을 지정하여 데이터 격자 내에서 편집할 수 있는 입력 필드를 제공합니다. 이 예제가 제대로 작동하려면 게시된 FLA 파일의 라이브러리에 DataGrid, Button, Label 및 TextInput 구성 요소가 있어야 합니다.

import fl.data.DataProvider;
import fl.controls.*;

var dp:DataProvider = new DataProvider();
var totalEntries:uint = 42;
var i:uint;
for(i=0; i<totalEntries; i++) {
    dp.addItem( {     col1:"CellName",
                    col2:"CellName",
                    col3:"CellName" } );            
}

var dg:DataGrid = new DataGrid();
dg.columns = [ "col1", "col2", "col3" ];
dg.editable = true;
dg.dataProvider = dp;
dg.move(200,10);
dg.setSize(200,300);
addChild(dg);

var rowIntro:Label = new Label();
rowIntro.text = "Row to edit:";
rowIntro.move(10,10);

var colIntro:Label = new Label();
colIntro.text = "Column to edit:";
colIntro.move(10,30);

var rowInputField:TextInput = new TextInput();
rowInputField.move(100,10);
rowInputField.setSize(30,20);

var colInputField:TextInput = new TextInput();
colInputField.move(100,30);
colInputField.setSize(30,20);

var editButton:Button = new Button();
editButton.move(10,60);
editButton.label = "Edit";
editButton.addEventListener(MouseEvent.CLICK,editGrid);

addChild(rowIntro);
addChild(colIntro);
addChild(rowInputField);
addChild(colInputField);
addChild(editButton);

function editGrid(e:MouseEvent):void {
    dg.editedItemPosition = { rowIndex:Number(rowInputField.text), columnIndex:Number(colInputField.text) };
}

editedItemRenderer

속성

editedItemRenderer:ICellRenderer [읽기 전용]

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

현재 편집 중인 항목이 포함되어 있는 DataGrid 구성 요소의 항목 렌더러에 대한 참조를 가져옵니다. 편집 중인 항목이 없는 경우 이 속성에는 null 값이 포함됩니다.

itemEditBegin 및 itemEditEnd 이벤트의 이벤트 리스너에서 editedItemRenderer.data 속성을 사용하여 현재 편집 중인 항목의 현재 값을 가져올 수 있습니다.

이 속성은 읽기 전용입니다. 사용자 정의 항목 편집기를 설정하려면 관련 열을 표시하는 클래스의 itemEditor 속성을 사용합니다.

구현
public function get editedItemRenderer():ICellRenderer

관련 API 요소

DataGridColumn.itemEditor

예제 ( 예제 사용 방법 )

import fl.data.DataProvider;
import fl.controls.*;

var dp:DataProvider = new DataProvider();
var totalEntries:uint = 42;
var i:uint;
for(i=0; i<totalEntries; i++) {
    dp.addItem( {     col1:"CellName",
                    col2:"CellName",
                    col3:"CellName" } );            
}

var dg:DataGrid = new DataGrid();
dg.columns = [ "col1", "col2", "col3" ];
dg.editable = true;
dg.dataProvider = dp;
dg.move(200,10);
dg.setSize(200,300);
addChild(dg);

var rowIntro:Label = new Label();
rowIntro.text = "Row to edit:";
rowIntro.move(10,10);

var colIntro:Label = new Label();
colIntro.text = "Column to edit:";
colIntro.move(10,30);

var rowInputField:TextInput = new TextInput();
rowInputField.move(100,10);
rowInputField.setSize(30,20);

var colInputField:TextInput = new TextInput();
colInputField.move(100,30);
colInputField.setSize(30,20);

var editButton:Button = new Button();
editButton.move(10,60);
editButton.label = "Edit";
editButton.addEventListener(MouseEvent.CLICK,editGrid);

addChild(rowIntro);
addChild(colIntro);
addChild(rowInputField);
addChild(colInputField);
addChild(editButton);

function editGrid(e:MouseEvent):void {
    dg.editedItemPosition = { rowIndex:Number(rowInputField.text), columnIndex:Number(colInputField.text) };
}

headerHeight

headerHeight:Number

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 머리글의 높이(픽셀 단위)를 가져오거나 설정합니다.

기본값: 25.

구현
public function get headerHeight():Number
public function set headerHeight(value:Number):void

관련 API 요소

rowHeight

예제 ( 예제 사용 방법 )

다음 예제에서는 슬라이더를 사용하여 DataGrid 구성 요소 인스턴스의 headerHeight 속성을 변경합니다.

import fl.controls.DataGrid;
import fl.controls.Slider;
import fl.events.SliderEvent;

var headerHeightSlider:Slider = new Slider();
headerHeightSlider.minimum = 20;
headerHeightSlider.maximum = 40;
headerHeightSlider.snapInterval = 2;
headerHeightSlider.tickInterval = 4;
headerHeightSlider.liveDragging = true;
headerHeightSlider.move(10, 10);
headerHeightSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
addChild(headerHeightSlider);

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.headerHeight = headerHeightSlider.value;
myDataGrid.addColumn("name");
myDataGrid.addColumn("value");
myDataGrid.addItem({name:"Person A", value:0.85});
myDataGrid.addItem({name:"Person B", value:0.87});
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 30);
addChild(myDataGrid);

function changeHandler(event:SliderEvent):void {
    myDataGrid.headerHeight = event.value;
    myDataGrid.rowCount = myDataGrid.length;
}

horizontalScrollPolicy

속성

horizontalScrollPolicy:String[재정의]

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

가로 스크롤 막대가 항상 표시되는지 여부를 나타내는 부울 값을 가져오거나 설정합니다. 다음 목록에서는 이 속성에 사용할 수 있는 값을 설명합니다.

ScrollPolicy.ON: 스크롤 막대가 항상 표시됩니다.
ScrollPolicy.OFF: 스크롤 막대가 항상 표시되지 않습니다.
ScrollPolicy.AUTO: 스크롤 막대의 상태가 setScrollBarProperties() 메서드에 전달되는 매개 변수에 따라 변경됩니다.

참고: DataGrid 구성 요소에서 표시되는 열의 폭을 합한 값이 DataGrid 구성 요소에서 사용 가능한 폭보다 작으면 horizontalScrollPolicy 속성 값에 따라 DataGrid 구성 요소의 사용 가능한 공간을 채울 수 있을 만큼 열을 확장하지 못할 수도 있습니다. 다음 목록에서는 이러한 값과 각 값에 따른 스크롤 막대의 상태를 설명합니다.

ScrollPolicy.ON: 가로 스크롤 막대가 비활성화됩니다. DataGrid 구성 요소의 사용 가능한 공간을 채울 수 있을 만큼 열을 확장할 수 없습니다.
ScrollPolicy.AUTO: 가로 스크롤 막대가 표시되지 않습니다. DataGrid 구성 요소의 사용 가능한 공간을 채울 수 있을 만큼 열을 확장할 수 없습니다.

기본값: ScrollPolicy.OFF.

구현
override public function get horizontalScrollPolicy():String
override public function set horizontalScrollPolicy(value:String):void

예제 ( 예제 사용 방법 )

다음 예제에서는 가로 스크롤 막대를 사용하여 셀 공간을 늘리는 데이터 격자를 만듭니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 42;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getRandomNumber(), col2:getRandomNumber(), 
    col3:getRandomNumber(), col4:getRandomNumber(), col5:getRandomNumber(), 
    col6:getRandomNumber(), col7:getRandomNumber()});
}

var dg:DataGrid = new DataGrid();
dg.setSize(200,300);
dg.addColumn("col1");
dg.addColumn("col2");
dg.addColumn("col3");
dg.addColumn("col4");
dg.addColumn("col5");
dg.addColumn("col6");
dg.addColumn("col7");
dg.dataProvider = dp;
dg.horizontalScrollPolicy = ScrollPolicy.ON;
addChild(dg);

function getRandomNumber():uint {
    return Math.round(Math.random() * 100);
}

imeMode

속성

imeMode:String

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

IME(Input Method Editor) 모드를 가져오거나 설정합니다. IME를 사용하면 QWERTY 키보드를 사용하여 한국어, 중국어 및 일본어 문자 세트의 문자를 입력할 수 있습니다.

Flash에서는 구성 요소가 포커스를 받으면 IME를 지정된 모드로 설정하고 포커스를 잃으면 IME를 원래 값으로 복원합니다.

flash.system.IMEConversionMode 클래스는 이 속성에 사용할 수 있는 값에 대한 상수를 정의합니다. 구성 요소에 IME를 사용하지 못하도록 하려면 이 속성을 null로 설정하십시오.

구현
public function get imeMode():String
public function set imeMode(value:String):void

관련 API 요소

IMEConversionMode

itemEditorInstance

속성

public var itemEditorInstance:Object

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

항목 편집기에서 현재 활성화된 인스턴스가 있는 경우 해당 인스턴스에 대한 참조입니다.

항목을 편집 중인 경우 항목 편집기 인스턴스와 새 항목 값에 액세스하려면 itemEditorInstance 속성을 사용합니다. itemEditorInstance 속성은 itemEditBegin 이벤트의 이벤트 리스너가 실행되기 전까지는 사용할 수 없습니다. 이러한 이유로 itemEditorInstance 속성은 일반적으로 itemEditEnd 이벤트의 이벤트 리스너에서 액세스합니다.

DataGridColumn.itemEditor 속성은 항목 편집기의 클래스와 항목 편집기 인스턴스의 데이터 유형을 정의합니다.

예제 ( 예제 사용 방법 )

다음 예제에서는 데이터 격자의 itemEditorInstance 속성에 액세스하여 편집한 셀의 텍스트를 확인합니다.

import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridCellEditor;
import fl.controls.listClasses.ListData;
import fl.events.DataGridEvent;

var dp:DataProvider = new DataProvider();
var totalEntries:uint = 42;
var i:uint;
for(i=0; i<totalEntries; i++) {
    dp.addItem( {     col1:"CellName",
                    col2:"CellName",
                    col3:"CellName" } );            
}

var dg:DataGrid = new DataGrid();
dg.addEventListener(DataGridEvent.ITEM_EDIT_END,onItemEditEnd);
dg.dataProvider = dp;
dg.editable = true;
dg.setSize(300,200);
addChild(dg);

function onItemEditEnd(e:DataGridEvent):void {
    var cellEditor:DataGridCellEditor = dg.itemEditorInstance as DataGridCellEditor;
    var listData:ListData = cellEditor.listData;
    trace("After Edit: " + cellEditor.text);
}

labelFunction

속성

labelFunction:Function

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

레이블 텍스트에 사용될 각 항목의 필드를 결정하는 함수를 가져오거나 설정합니다.

기본값: null.

구현
public function get labelFunction():Function
public function set labelFunction(value:Function):void

예제 ( 예제 사용 방법 )

다음 예제에서는 데이터 격자의 각 열에 레이블 함수를 사용합니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 16;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getRandomNumber(), col2:getRandomNumber(), 
    col3:getRandomNumber(), col4:getRandomNumber()});
}

var c1:DataGridColumn = new DataGridColumn("col1");
c1.sortOptions = Array.NUMERIC;
var c2:DataGridColumn = new DataGridColumn("col2");
c2.sortOptions = Array.NUMERIC;
var c3:DataGridColumn = new DataGridColumn("col3");
c3.sortOptions = Array.NUMERIC;

var dg:DataGrid = new DataGrid();
dg.addColumn(c1);
dg.addColumn(c2);
dg.addColumn(c3);
dg.dataProvider = dp;
dg.labelFunction = currencyFormatter;
dg.move(10, 10);
dg.setSize(200, 300);
addChild(dg);

function getRandomNumber():Number {
    return Math.random() * 100;
}

function currencyFormatter(data:Object, column:DataGridColumn):String {
    return "$" + data[column.dataField].toFixed(2);
}

minColumnWidth

속성

minColumnWidth:Number

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 열의 최소 폭(픽셀 단위)을 가져오거나 설정합니다. 이 값을 NaN으로 설정하면 DataGrid 구성 요소의 각 열에 대해 최소 열 폭을 개별적으로 설정할 수 있습니다.

기본값: NaN.

구현
public function get minColumnWidth():Number
public function set minColumnWidth(value:Number):void

예제 ( 예제 사용 방법 )

다음 예제에서는 데이터 격자의 가로 스크롤을 사용하도록 설정하고, 샘플 문자열 폭에 충분히 맞도록 열의 최소 폭을 185로 설정합니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 42;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getString(), col2:getString(), col3:getString(), 
    col4:getString(), col5:getString(), col6:getString(), col7:getString()});
}

var dg:DataGrid = new DataGrid();
dg.setSize(450,300);
dg.addColumn("col1");
dg.addColumn("col2");
dg.addColumn("col3");
dg.addColumn("col4");
dg.addColumn("col5");
dg.addColumn("col6");
dg.addColumn("col7");
dg.dataProvider = dp;
dg.horizontalScrollPolicy = ScrollPolicy.ON;
dg.minColumnWidth = 185;
addChild(dg);

function getString():String {
    return "This string requires a wide column";
}

resizableColumns

public var resizableColumns:Boolean = true

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 열의 크기를 변경할 수 있는지 여부를 나타냅니다. true 값은 사용자가 열 크기를 변경할 수 있음을 나타내고, false 값은 열 크기가 고정됨을 나타냅니다.

이 값이 true이면 사용자가 머리글 셀 사이의 격자선을 드래그하는 방법으로 DataGrid 구성 요소의 열을 확장하거나 축소할 수 있습니다. 또한 이 값이 true인 경우 개별 열의 resizeable 속성이 false로 설정되어 있지 않으면 사용자가 열 크기를 변경할 수 있습니다.

기본값: true.

관련 API 요소

DataGridColumn.resizable

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 resizableColumns 및 sortableColumns를 false로 설정합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;

var nameCol:DataGridColumn = new DataGridColumn("name");
nameCol.headerText = "NAME:";
nameCol.width = 120;

var valueCol:DataGridColumn = new DataGridColumn("value");
valueCol.headerText = "VALUE:";
valueCol.width = 80;

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(nameCol);
myDataGrid.addColumn(valueCol);
myDataGrid.addItem({name:"Name A", value:"Value A"});
myDataGrid.addItem({name:"Name B", value:"Value B"});
myDataGrid.addItem({name:"Name C", value:"Value C"});
myDataGrid.resizableColumns = false;
myDataGrid.sortableColumns = false;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

rowCount

속성

rowCount:uint[재정의]

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

목록에 일부라도 표시되는 행 수를 가져오거나 설정합니다.

구현
override public function get rowCount():uint
override public function set rowCount(value:uint):void

관련 API 요소

SelectableList.length

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 rowCount 속성을 사용하여 데이터 격자의 크기를 조정합니다.

import fl.controls.DataGrid;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem({col1:"item 1.A", col2:"item 1.B", col3:"item 1.C"});
dp.addItem({col1:"item 2.A", col2:"item 2.B", col3:"item 2.C"});
dp.addItem({col1:"item 3.A", col2:"item 3.B", col3:"item 3.C"});
dp.addItem({col1:"item 4.A", col2:"item 4.B", col3:"item 4.C"});

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("col1");
myDataGrid.addColumn("col2");
myDataGrid.addColumn("col3");
myDataGrid.dataProvider = dp;
myDataGrid.move(10, 10);
myDataGrid.setSize(300, 200);
addChild(myDataGrid);

var fixedHeight:uint = Math.min(myDataGrid.rowCount, myDataGrid.length);
myDataGrid.rowCount = fixedHeight;

trace(myDataGrid.width, myDataGrid.height); // 300 105

rowHeight

속성

rowHeight:Number

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에 있는 각 행의 높이를 픽셀 단위로 가져오거나 설정합니다.

기본값: 20.

구현
public function get rowHeight():Number
public function set rowHeight(value:Number):void

관련 API 요소

headerHeight

예제 ( 예제 사용 방법 )

다음 예제에서는 데이터 격자의 행 높이를 조정하고 Stage에 있는 모든 구성 요소의 텍스트 크기를 줄입니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.managers.StyleManager;

var dp:DataProvider = new DataProvider();
var totalEntries:uint = 42;
var i:uint;
for(i = 0; i < totalEntries; i++) {
    dp.addItem( { col1:Math.random(), col2:Math.random(), col3:Math.random() } );           
}

var smallText:TextFormat = new TextFormat();
smallText.size = 9;
smallText.font = "Verdana";

var dg:DataGrid = new DataGrid();
dg.columns = ["col1", "col2", "col3"];
dg.rowHeight = 14;
dg.move(10, 10);
dg.setSize(400, 300);
dg.dataProvider = dp;
dg.setStyle("textFormat", smallText);
addChild(dg);

StyleManager.setStyle("textFormat", smallText);

showHeaders

속성

showHeaders:Boolean

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에 열 머리글이 표시되는지 여부를 나타내는 부울 값을 가져오거나 설정합니다. true 값은 DataGrid 구성 요소에 열 머리글이 표시됨을 나타내고, false 값은 표시되지 않음을 나타냅니다.

기본값: true.

구현
public function get showHeaders():Boolean
public function set showHeaders(value:Boolean):void

예제 ( 예제 사용 방법 )

다음 예제에서는 열 머리글이 있는 데이터 격자와 열 머리글이 없는 데이터 격자, 이 두 가지 데이터 격자를 만듭니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 42;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:Math.random(), col2:Math.random()});
}

var dg1:DataGrid = new DataGrid();
dg1.move(10,10);
dg1.setSize(200,300);
dg1.dataProvider = dp;
addChild(dg1);

var dg2:DataGrid = new DataGrid();
dg2.move(250,10);
dg2.setSize(200,300);
dg2.dataProvider = dp;
dg2.showHeaders = false;
addChild(dg2);

sortableColumns

속성

public var sortableColumns:Boolean = true

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 열 머리글 셀을 클릭하여 데이터 공급자의 항목을 정렬할 수 있는지 여부를 나타냅니다. 이 값이 true이면 사용자가 열 머리글 셀을 클릭하여 데이터 공급자 항목을 정렬할 수 있고 false이면 사용자가 해당 정렬 작업을 수행할 수 없습니다.

이 값이 true인 경우 사용자가 머리글 셀을 마우스로 클릭할 때 개별 셀이 응답하지 않도록 하기 위해 해당 열의 sortable 속성을 false로 설정하십시오.

열의 정렬 필드는 DataGridColumn 구성 요소의 dataField 또는 sortCompareFunction 속성입니다. 사용자가 열을 여러 번 클릭하면 정렬 작업이 오름차순과 내림차순으로 번갈아 전환됩니다.

이 속성과 열의 sortable 속성이 모두 true로 설정되어 있는 경우 사용자가 열 머리글 셀에서 마우스 버튼을 놓으면 DataGrid 구성 요소가 headerRelease 이벤트를 전달합니다. headerRelease 이벤트의 핸들러 메서드에서 preventDefault() 메서드를 호출하지 않은 경우 DataGrid 구성 요소는 dataField 또는 sortCompareFunction 속성 값을 기준으로 정렬을 수행합니다.

기본값: true.

관련 API 요소

DataGridColumn.sortable

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 사용자가 목록을 정렬할 수 없도록 sortableColumns 속성을 false로 설정합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent;

var data:XML = <dataProvider>
        <data col1="Person A" col2="11.383" />
        <data col1="Person B" col2="3.399" />
        <data col1="Person C" col2="25.624" />
    </dataProvider>

var dp:DataProvider = new DataProvider(data);

var c1:DataGridColumn = new DataGridColumn("col1");
var c2:DataGridColumn = new DataGridColumn("col2");

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(c1);
myDataGrid.addColumn(c2);
myDataGrid.dataProvider = dp;
myDataGrid.move(10, 10);
myDataGrid.setSize(160, 120);
myDataGrid.sortableColumns = false;
addChild(myDataGrid);

sortDescending

속성

sortDescending:Boolean [읽기 전용]

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 열 머리글을 클릭하면 열이 정렬되는 순서를 가져옵니다. true 값은 열이 내림차순으로 정렬됨을 나타내고, false 값은 열이 오름차순으로 정렬됨을 나타냅니다.

sortDescending 속성은 sort 메서드가 정렬 작업을 완료하는 방법에 영향을 주지 않습니다. 기본적으로 정렬 작업에서는 대소문자를 구분하여 문자열을 정렬합니다. 이 비헤이비어를 변경하려면 DataGridColumn 클래스의 sortOptions 및 sortCompareFunction 속성을 수정합니다.

참고: 이벤트 리스너에서 headerRelease 이벤트에 대해 이 속성을 쿼리하면 속성 값이 이전 정렬 작업에 대한 정렬 순서를 식별합니다. 그 이유는 다음 정렬이 아직 발생하지 않았기 때문입니다.

기본값: false.

구현
public function get sortDescending():Boolean

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 headerRelease를 수신한 다음 sortDescending, sortIndex 및 dataField 속성을 추적합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent;

var dataXML:XML = <dataProvider>
        <data col1="Person A" col2="11.383" />
        <data col1="Person B" col2="3.399" />
        <data col1="Person C" col2="25.624" />
    </dataProvider>

var dp:DataProvider = new DataProvider(dataXML);

var c1:DataGridColumn = new DataGridColumn("col1");
var c2:DataGridColumn = new DataGridColumn("col2");
c2.sortOptions = Array.NUMERIC;

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(c1);
myDataGrid.addColumn(c2);
myDataGrid.dataProvider = dp;
myDataGrid.width = 160;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
myDataGrid.addEventListener(DataGridEvent.HEADER_RELEASE, headerReleaseHandler);
addChild(myDataGrid);

function headerReleaseHandler(event:DataGridEvent):void {
    var myDG:DataGrid = event.currentTarget as DataGrid;
    var whichColumn:DataGridColumn = myDG.getColumnAt(event.columnIndex);
    trace("sortDescending:", myDG.sortDescending);
    trace("sortIndex:", myDG.sortIndex);
    trace("dataField:", whichColumn.dataField);
    trace("");
}

sortIndex

속성

sortIndex:int [읽기 전용]

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

정렬할 열의 인덱스를 가져옵니다.

기본값: -1.

구현
public function get sortIndex():int

관련 API 요소

sortDescending

생성자 세부 정보

DataGrid

()

생성자

public function DataGrid()

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

새 DataGrid 구성 요소 인스턴스를 만듭니다.

메서드 세부 정보

addColumn

()

메서드

public function addColumn(column:*):DataGridColumn

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

columns 배열의 끝에 새로운 열을 추가합니다.

매개 변수

column:* — String 또는 DataGridColumn 객체입니다.

반환값

DataGridColumn — 추가된 DataGridColumn 객체입니다.

관련 API 요소

addColumnAt()

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 addColumn() 메서드에 문자열을 전달하여 두 개의 열을 추가합니다.

import fl.controls.DataGrid;

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("name");
myDataGrid.addColumn("value");
myDataGrid.addItem({name:"Name 1", value:"Value 1"});
myDataGrid.addItem({name:"Name 2", value:"Value 2"});
myDataGrid.addItem({name:"Name 3", value:"Value 3"});
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 addColumn() 메서드에 DataGridColumn 객체를 전달하여 두 개의 열을 추가합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;

var nameCol:DataGridColumn = new DataGridColumn("name");
var valueCol:DataGridColumn = new DataGridColumn("value");

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(nameCol);
myDataGrid.addColumn(valueCol);
myDataGrid.addItem({name:"Name 1", value:"Value 1"});
myDataGrid.addItem({name:"Name 2", value:"Value 2"});
myDataGrid.addItem({name:"Name 3", value:"Value 3"});
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

다음 예제에서는 데이터 공급자를 설정하기 전에 수동으로 열을 추가하여 열의 순서 및 크기를 지정합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { stateName:"California", stateAbbreviation:"CA" } );
dp.addItem( { stateName:"New York", stateAbbreviation:"NY" } );

var dg:DataGrid = new DataGrid();
var abbreviationColumn:DataGridColumn = dg.addColumn(new DataGridColumn("stateAbbreviation"));                                            
var nameColumn:DataGridColumn = dg.addColumn("stateName");
abbreviationColumn.width = 100;
nameColumn.width = 200;

dg.move(10,10);
dg.width = 300;
dg.rowCount = 2;
dg.dataProvider = dp;
addChild(dg);

addColumnAt

()

메서드

public function addColumnAt(column:*, index:uint):DataGridColumn

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

columns 배열의 지정한 인덱스 위치에 열을 삽입합니다.

매개 변수

	column:* — 삽입할 열을 표현하는 문자열 또는 DataGridColumn 객체입니다.

	index:uint — 열을 삽입할 위치를 나타내는 배열 인덱스입니다.

반환값

DataGridColumn — 열 배열에 삽입된 DataGridColumn 객체입니다.

관련 API 요소

addColumn()

예제 ( 예제 사용 방법 )

다음 예제에서는 데이터 공급자를 설정하기 전에 수동으로 열을 추가하여 열의 순서 및 크기를 지정합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { stateName:"California", stateAbbreviation:"CA" } );
dp.addItem( { stateName:"New York", stateAbbreviation:"NY" } );

var dg:DataGrid = new DataGrid();
var abbreviationColumn:DataGridColumn = dg.addColumn(new DataGridColumn("stateAbbreviation"));                                            
var nameColumn:DataGridColumn = dg.addColumn("stateName");
abbreviationColumn.width = 100;
nameColumn.width = 200;

dg.move(10,10);
dg.width = 300;
dg.rowCount = 2;
dg.dataProvider = dp;
addChild(dg);

createItemEditor

()

메서드

public function createItemEditor(colIndex:uint, rowIndex:uint):void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

itemEditor 속성에 지정된 편집기를 사용하여 editedItemPosition 속성에 지정된 열 및 행 인덱스에서 항목 렌더러에 대해 항목 편집기를 만듭니다.

편집기 인스턴스를 itemEditorInstance 속성으로 설정하는 메서드입니다.

이 메서드는 itemEditBegin 이벤트의 이벤트 리스너에서 호출할 수 있습니다. 다른 코드로 편집기를 만들려면 editedItemPosition 속성을 설정하여 itemEditBegin 이벤트를 생성합니다.

매개 변수

	colIndex:uint — 데이터 공급자에서 편집할 항목의 열 인덱스입니다.

	rowIndex:uint — 데이터 공급자에서 편집할 행 인덱스입니다.

destroyItemEditor

()

메서드

public function destroyItemEditor():void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

현재 항목 렌더러에 대해 열려 있는 항목 편집기를 닫습니다. 이 메서드는 일반적으로 기본 이벤트 리스너를 실행할 수 없도록 차단하기 위해 preventDefault() 메서드를 호출한 경우 itemEditEnd 이벤트의 이벤트 리스너에서 호출됩니다.

editField

()

메서드

public function editField(index:uint, dataField:String, data:Object):void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에서 지정된 필드 또는 속성을 편집합니다.

매개 변수

	index:uint — 편집할 데이터 공급자의 인덱스입니다.

	dataField:String — 편집할 데이터 공급자 항목의 필드 이름 또는 속성 이름입니다.

	data:Object — 새 데이터 값입니다.

오류

RangeError — 지정한 인덱스가 0보다 작거나 데이터 공급자의 길이보다 크거나 같습니다.

getCellRendererAt

()

메서드

public function getCellRendererAt(row:uint, column:uint):ICellRenderer

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid의 지정된 위치에서 셀 렌더러 인스턴스를 가져옵니다.

참고: 이 메서드는 위치가 표시되지 않는 경우(예: 보기 밖으로 스크롤한 경우) null을 반환합니다.

매개 변수

	row:uint — 행 인덱스입니다.

	column:uint — 열 인덱스입니다.

반환값

ICellRenderer — 지정된 위치의 ICellRenderer 객체를 반환하거나, 해당 위치에 셀 렌더러가 없는 경우 null을 반환합니다.

getColumnAt

()

메서드

public function getColumnAt(index:uint):DataGridColumn

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

columns 배열의 지정된 인덱스에 있는 열을 검색합니다.

매개 변수

index:uint — 검색할 열의 인덱스 또는 열이 없는 경우 null입니다.

반환값

DataGridColumn — 지정된 인덱스에서 검색된 DataGridColumn 객체입니다.

관련 API 요소

getColumnIndex()

getColumnCount

()

메서드

public function getColumnCount():uint

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에 있는 열 수를 가져옵니다.

반환값

uint — DataGrid 구성 요소에 포함된 열 수입니다.

관련 API 요소

rowCount

예제 ( 예제 사용 방법 )

다음 예제에서는 새 DataGrid를 채우고 columns 배열과 getColumnCount() 메서드를 모두 사용하여 열 수를 반환합니다.

import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;

var i:uint;
var totalRows:uint = 16;
var dp:DataProvider = new DataProvider();
for (i = 0; i < totalRows; i++) {
    dp.addItem({col1:getRandomNumber(), col2:getRandomNumber(), 
    col3:getRandomNumber(), col4:getRandomNumber()});
}

var dg:DataGrid = new DataGrid();
dg.setSize(200, 300);
dg.columns = ["col1", "col2", "col3"];
dg.dataProvider = dp;
addChild(dg);

trace("columns.length:", dg.columns.length); // 3
trace("getColumnCount():", dg.getColumnCount()); // 3

function getRandomNumber():uint {
    return Math.round(Math.random() * 100);
}

다음 예제에서는 DataGrid를 만들고 columnStretch 이벤트가 전달될 때마다 각 데이터 격자 열의 폭을 추적합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.events.DataGridEvent;

var nameCol:DataGridColumn = new DataGridColumn("name");
var valueCol:DataGridColumn = new DataGridColumn("value");

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(nameCol);
myDataGrid.addColumn(valueCol);
myDataGrid.addItem({name:"Name 1", value:"Value 1"});
myDataGrid.addItem({name:"Name 2", value:"Value 2"});
myDataGrid.addItem({name:"Name 3", value:"Value 3"});
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
myDataGrid.addEventListener(DataGridEvent.COLUMN_STRETCH, columnStretchHandler);
addChild(myDataGrid);

function columnStretchHandler(event:DataGridEvent):void {
    var col:DataGridColumn;
    for each (col in myDataGrid.columns) {
        trace(col.dataField + ":", col.width + "px")
    }
    trace("");
}

getColumnIndex

()

메서드

public function getColumnIndex(name:String):int

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

지정된 이름의 열 인덱스를 가져오거나, 일치하는 항목이 없는 경우 -1을 반환합니다.

매개 변수

name:String — 찾으려는 열의 데이터 필드입니다.

반환값

int — 지정된 이름의 열이 검색된 위치의 인덱스입니다.

관련 API 요소

getColumnAt()

getStyleDefinition

()

메서드

public static function getStyleDefinition():Object

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

현재 구성 요소에 대한 기본 스타일 맵을 가져옵니다. 스타일 맵에는 구성 요소에서 사용하는 스타일에 따라 구성 요소에 적합한 유형이 포함됩니다. 예를 들어 disabledTextFormat 스타일에는 null 값 또는 TextFormat 객체가 포함되어 있습니다. 이러한 스타일을 사용하여 현재 구성 요소에서 setStyle()을 호출할 수 있습니다. 다음 코드는 지정된 구성 요소에서 기본 disabledTextFormat 스타일을 무시합니다.

componentInstance.setStyle("disabledTextFormat", new TextFormat());

반환값

Object — 기본 스타일 객체입니다.

예제 ( 예제 사용 방법 )

다음 예제에서는 여러 구성 요소 클래스에 대한 스타일 탐색기를 만듭니다.

import fl.controls.*;
import fl.containers.*;
import fl.controls.listClasses.*;
import fl.controls.dataGridClasses.*;
import fl.controls.progressBarClasses.*;
import fl.core.UIComponent;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { label: "BaseScrollPane",    data:BaseScrollPane } );
dp.addItem( { label: "Button",             data:Button } );
dp.addItem( { label: "CellRenderer",    data:CellRenderer } );
dp.addItem( { label: "CheckBox",         data:CheckBox } );
dp.addItem( { label: "ColorPicker",     data:ColorPicker } );
dp.addItem( { label: "ComboBox",         data:ComboBox } );
dp.addItem( { label: "DataGrid",         data:DataGrid } );
dp.addItem( { label: "HeaderRenderer",    data:HeaderRenderer } );
dp.addItem( { label: "ImageCell",        data:ImageCell } );
dp.addItem( { label: "IndeterminateBar",data:IndeterminateBar } );
dp.addItem( { label: "Label",             data:Label } );
dp.addItem( { label: "List",             data:List } );
dp.addItem( { label: "NumericStepper",     data:NumericStepper } );
dp.addItem( { label: "ProgressBar",     data:ProgressBar } );
dp.addItem( { label: "RadioButton",     data:RadioButton } );
dp.addItem( { label: "ScrollPane",         data:ScrollPane } );
dp.addItem( { label: "Slider",             data:Slider } );
dp.addItem( { label: "TextArea",         data:TextArea } );
dp.addItem( { label: "TextInput",         data:TextInput } );
dp.addItem( { label: "TileList",         data:TileList } );
dp.addItem( { label: "UILoader",         data:UILoader } );
dp.addItem( { label: "UIComponent",     data:UIComponent } );

var cb:ComboBox = new ComboBox();
cb.move(10,10);
cb.setSize(300,25);
cb.prompt = "Select a component to view its styles";
cb.rowCount = 12;
cb.dataProvider = dp;
cb.addEventListener(Event.CHANGE, showStyleDefinition);
addChild(cb);

var dg:DataGrid = new DataGrid();
dg.setSize(425,300);
dg.move(10,50);
dg.columns = [ new DataGridColumn("StyleName"), new DataGridColumn("DefaultValue") ];
addChild(dg);

function showStyleDefinition(e:Event):void {
    var componentClass:Class = e.target.selectedItem.data as Class;
    var styles:Object = componentClass["getStyleDefinition"].call(this);
    trace(styles.toString());
    var styleData:DataProvider = new DataProvider();
    for(var i:* in styles) {
        trace(i + " : " + styles[i]);
        styleData.addItem( { StyleName:i, DefaultValue:styles[i] } );
    }
    styleData.sortOn("StyleName");
    dg.dataProvider = styleData;
}

itemToCellRenderer

()

메서드

override public function itemToCellRenderer(item:Object):ICellRenderer

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에는 지정된 항목에 대한 셀이 여러 개 있으므로 itemToCellRenderer 메서드는 항상 null을 반환합니다.

매개 변수

item:Object — 데이터 공급자의 항목입니다.

반환값

ICellRenderer — null을 반환합니다.

removeAllColumns

()

메서드

public function removeAllColumns():void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

DataGrid 구성 요소에서 모든 열을 제거합니다.

관련 API 요소

removeColumnAt()

removeColumnAt

()

메서드

public function removeColumnAt(index:uint):DataGridColumn

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

columns 배열의 지정된 인덱스에 있는 열을 제거합니다.

매개 변수

index:uint — 제거할 열의 인덱스입니다.

반환값

DataGridColumn — 제거된 DataGridColumn 객체입니다. 이 메서드를 실행하는 경우 지정된 인덱스에 열이 없으면 null이 반환됩니다.

관련 API 요소

removeAllColumns()

scrollToIndex

()

메서드

override public function scrollToIndex(newCaretIndex:int):void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

지정된 인덱스에 있는 항목으로 목록을 스크롤합니다. 인덱스가 범위를 벗어나는 경우에는 스크롤 위치가 변경되지 않습니다.

매개 변수

newCaretIndex:int — 스크롤할 인덱스 위치입니다.

spaceColumnsEqually

()

메서드

public function spaceColumnsEqually():void

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

표시되는 열의 폭을 같은 크기로 재설정합니다.

이벤트 세부 정보

columnStretch

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.COLUMN_STRETCH

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 열을 가로로 확장할 때 전달됩니다.

DataGridEvent.COLUMN_STRETCH 상수는 columnStretch 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	항목의 열과 연관된 데이터의 필드 이름 또는 속성 이름입니다.
itemRenderer	확장된 열의 머리글 렌더러입니다.
reason	null
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소를 만들고 해당 columnStretch 이벤트를 수신합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent;

var dp:DataProvider = new DataProvider();
dp.addItem({col1:"item 1.A", col2:"item 1.B", col3:"item 1.C"});
dp.addItem({col1:"item 2.A", col2:"item 2.B", col3:"item 2.C"});
dp.addItem({col1:"item 3.A", col2:"item 3.B", col3:"item 3.C"});
dp.addItem({col1:"item 4.A", col2:"item 4.B", col3:"item 4.C"});

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("col1");
myDataGrid.addColumn("col2");
myDataGrid.addColumn("col3");
myDataGrid.dataProvider = dp;
myDataGrid.setSize(300, 200);
myDataGrid.move(10, 10);
myDataGrid.addEventListener(DataGridEvent.COLUMN_STRETCH, columnStretchHandler);
addChild(myDataGrid);

function columnStretchHandler(event:DataGridEvent):void {
    var dg:DataGrid = event.target as DataGrid;
    var column:DataGridColumn;
    var columnArray:Array = dg.columns;
    var dgColWidth:String;
    trace("resized column:", event.dataField);
    trace("columnIndex:", event.columnIndex);
    for each (column in columnArray) {
        dgColWidth = Number(column.width / dg.width * 100).toFixed(1);
        trace(column.dataField + ".width:", column.width + " pixels (" + dgColWidth + "%)");
    }
    trace("----------");
}

headerRelease

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.HEADER_RELEASE

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

사용자가 머리글 셀을 클릭할 때 전달됩니다.

DataGridEvent.HEADER_RELEASE 상수는 headerRelease 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	항목의 열과 연관된 데이터의 필드 이름 또는 속성 이름입니다.
itemRenderer	클릭한 머리글 렌더러입니다.
reason	null
rowIndex	-1
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

예제 ( 예제 사용 방법 )

다음 예제에서는 DataGrid 구성 요소 인스턴스를 만들고 해당 headerRelease 이벤트를 수신합니다.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent;

var dp:DataProvider = new DataProvider();
dp.addItem({col1:"item 1.A", col2:"item 1.B", col3:"item 1.C"});
dp.addItem({col1:"item 2.A", col2:"item 2.B", col3:"item 2.C"});
dp.addItem({col1:"item 3.A", col2:"item 3.B", col3:"item 3.C"});
dp.addItem({col1:"item 4.A", col2:"item 4.B", col3:"item 4.C"});

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("col1");
myDataGrid.addColumn("col2");
myDataGrid.addColumn("col3");
myDataGrid.dataProvider = dp;
myDataGrid.setSize(300, 200);
myDataGrid.move(10, 10);
myDataGrid.addEventListener(DataGridEvent.HEADER_RELEASE, headerReleaseHandler);
addChild(myDataGrid);

function headerReleaseHandler(event:DataGridEvent):void {
    var dg:DataGrid = event.target as DataGrid;
    trace("dataField:", event.dataField, "(columnIndex:" + event.columnIndex + ")");
    trace("sortIndex:", dg.sortIndex);
    trace("sortDescending:", dg.sortDescending);
    trace("----------");
}

itemEditBegin

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.ITEM_EDIT_BEGIN

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

editedItemPosition 속성이 설정되어 있고 항목을 편집할 수 있는 경우에 전달됩니다.

DataGridEvent.ITEM_EDIT_BEGIN 상수는 itemEditBegin 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	null
itemRenderer	편집할 항목의 항목 렌더러입니다.
reason	null
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

관련 API 요소

itemEditBeginning
itemEditEnd

itemEditBeginning

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.ITEM_EDIT_BEGINNING

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

항목을 편집할 수 있는 상태가 될 때 전달됩니다. 예를 들어 항목을 클릭했던 마우스 버튼을 놓는 경우에 전달됩니다.

DataGridEvent.ITEM__EDIT_BEGINNING 상수는 itemEditBeginning 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	항목의 열과 연관된 데이터의 필드 이름 또는 속성 이름입니다.
itemRenderer	편집할 항목의 항목 렌더러입니다.
reason	null
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

관련 API 요소

itemEditBegin
itemEditEnd

itemEditEnd

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.ITEM_EDIT_END

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

이유에 관계없이 항목 편집 세션이 끝날 때 전달됩니다.

DataGridEvent.ITEM_EDIT_END 상수는 itemEditEnd 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	항목의 열과 연관된 데이터의 필드 이름 또는 속성 이름입니다.
itemRenderer	편집할 항목의 항목 렌더러입니다.
reason	이벤트의 이유를 정의하는 상수입니다. 값은 DataGridEventReason 클래스의 멤버여야 합니다.
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

관련 API 요소

itemEditBegin
itemEditBeginning

itemFocusIn

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.ITEM_FOCUS_IN

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

항목이 포커스를 받은 경우에 전달됩니다.

DataGridEvent.ITEM_FOCUS_IN 상수는 itemFocusIn 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	null
itemRenderer	편집할 항목의 항목 렌더러입니다.
reason	null
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

관련 API 요소

itemFocusOut

이벤트

이벤트 객체 유형: fl.events.DataGridEvent
속성 DataGridEvent.type = fl.events.DataGridEvent.ITEM_FOCUS_OUT

언어 버전:

ActionScript 3.0

제품 버전:

Flash CS3

런타임 버전:

Flash Player 9.0.28.0, AIR 1.0

항목이 포커스를 잃은 경우에 전달됩니다.

DataGridEvent.ITEM_FOCUS_OUT 상수는 itemFocusOut 이벤트 객체의 type 속성 값을 정의합니다.

이 이벤트에는 다음과 같은 속성이 있습니다.

속성값

bubbles	false
cancelable	false. 취소할 기본 비헤이비어가 없습니다.
columnIndex	DataGrid 객체의 columns 배열에 있는 머리글 열의 인덱스(0부터 시작)입니다.
currentTarget	이벤트 리스너를 통해 Event 객체를 처리하고 있는 객체입니다.
dataField	null
itemRenderer	편집할 항목의 항목 렌더러입니다.
reason	null
rowIndex	데이터 공급자에 있는 항목의 인덱스(0부터 시작)입니다.
target	이벤트를 전달한 객체입니다. 이벤트를 수신하는 객체와는 다를 수도 있습니다. 이벤트를 수신하는 객체에 액세스하려면 currentTarget 속성을 사용합니다.

관련 API 요소

itemFocusIn

예제 예제 사용 방법

DataGridExample.as

이 예제에서는 동적으로 DataGrid를 만들고 해당 이벤트를 수신하는 방법을 보여 줍니다.

DataGrid 구성 요소를 라이브러리에 추가합니다.
이 코드를 FLA와 같은 디렉토리에 DataGridExample.as로 저장합니다.
FLA의 DocumentClass를 DataGridExample로 설정합니다.

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;
    import fl.controls.DataGrid;
    
    public class DataGridExample extends Sprite
    {
        var sampleItem1:Object = { Name:"John Alpha",     Number:"555-123-0101", Email:"jalpha@fictitious.com" };
        var sampleItem2:Object = { Name:"Mary Bravo",     Number:"555-372-3322", Email:"mbravo@fictitious.com" };
        var sampleItem3:Object = { Name:"Trevor Gamma", Number:"555-485-1212", Email:"tgamma@fictitious.com" };
        var sampleItem4:Object = { Name:"Susan Delta",     Number:"555-987-3434", Email:"sdelta@fictitious.com" };        
        
        var dg:DataGrid;
        var tf1:TextField;
        var tf2:TextField;
        var tf3:TextField;
        
        public function DataGridExample() {
            createDataGrid();
            createTextFields();
        }
        private function createDataGrid():void {
            dg = new DataGrid();
            dg.move(10,10);
            dg.setSize(500,125);
            dg.columns = ["Name","Number","Email"];
            dg.addItem(sampleItem1);
            dg.addItem(sampleItem2);
            dg.addItem(sampleItem3);
            dg.addItem(sampleItem4);
            
            dg.addEventListener("change",gridItemSelected);
            dg.minColumnWidth = dg.width / 3;
            addChild(dg);
        }
        private function createTextFields():void {
            tf1 = new TextField();
            tf2 = new TextField();
            tf3 = new TextField();
            tf1.x = 
            tf2.x = 
            tf3.x = 10;
            tf1.autoSize =
            tf2.autoSize =
            tf3.autoSize = "left";
            tf1.y = 150;
            tf2.y = 175;
            tf3.y = 200;
            
            addChild(tf1);
            addChild(tf2);
            addChild(tf3);            
        }
        private function gridItemSelected(e:Event):void {
            tf1.text = "Name: " + e.target.selectedItem.Name;
            tf2.text = "Number: " + e.target.selectedItem.Number;
            tf3.text = "Email: " + e.target.selectedItem.Email;            
        }
    }
}

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

[flash] DataGrid 폰트 크기 변경

출처: http://blog.naver.com/PostView.nhn?blogId=jh3397&logNo=10048933265

var myDataGrid:DataGrid = new DataGrid();
var items:Array = [
{label:"David", data:"11/19/1995"},
{label:"Colleen", data:"4/20/1993"},
{label:"Sharon", data:"9/06/1997"},
{label:"Ronnie", data:"7/6/1993"},
{label:"James", data:"2/15/1994"},
];
var dp:DataProvider;
dp = new DataProvider(items);
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.move(10, 10);
//myDataGrid.setStyle("fontSize","28");
myDataGrid.setSize(160,190);
var tf:TextFormat = new TextFormat();
tf.size = 14;
tf.color = 0xff0000;
tf.italic = true;
tf.font = "Arial";
myDataGrid.setStyle("headerTextFormat", tf); // 헤더의 스타일 변경
//myDataGrid.setRendererStyle("embedFonts", true);
myDataGrid.setRendererStyle("textFormat", tf);리스트 박스의 스타일 변경

addChild(myDataGrid);

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

출처: http://help.adobe.com/ko_KR/AS2LCR/Flash_10.0/help.html?content=00001984.html

DataGrid 구성 요소에 스타일 사용

스타일 속성을 설정하여 DataGrid 구성 요소의 모양을 변경할 수 있습니다. DataGrid 구성 요소는 List 구성 요소의 스타일을 상속합니다. 자세한 내용은 List 구성 요소에 스타일 사용을 참조하십시오.

개별 열 스타일 설정

DataGrid 객체에는 열이 여러 개 포함될 수 있으며 각 열에 서로 다른 셀 렌더러를 지정할 수 있습니다. DataGrid의 각 열은 DataGridColumn 객체로 표현되며 DataGridColumn 클래스에는 열의 CellRenderer를 정의할 수 있는 cellRenderer 속성이 포함됩니다.

새 Flash 문서(ActionScript 3.0)를 만듭니다.
DataGrid 구성 요소를 [라이브러리] 패널로 드래그합니다.
타임라인의 프레임 1에서 다음 코드를 [액션] 패널에 추가합니다. 이 코드는 세 번째 열에 긴 텍스트 문자열이 있는 DataGrid를 만듭니다. 마지막으로 열의 cellRenderer 속성을 여러 셀을 렌더링하는 셀 렌더러 이름으로 설정합니다.

/* This is a simple cell renderer example.It invokes 
the MultiLineCell cell renderer to display a multiple  
line text field in one of a DataGrid's columns. */ 
 
import fl.controls.DataGrid; 
import fl.controls.dataGridClasses.DataGridColumn; 
import fl.data.DataProvider; 
import fl.controls.ScrollPolicy; 
 
// Create a new DataGrid component instance. 
var aDg:DataGrid = new DataGrid(); 
 
var aLongString:String = "An example of a cell renderer class that displays a multiple line TextField" 
var myDP:Array = new Array(); 
myDP = [{firstName:"Winston", lastName:"Elstad", note:aLongString, item:100}, 
    {firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101},  
    {firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102},  
    {firstName:"Kevin", lastName:"Wade", note:aLongString, item:103},      
    {firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104},  
    {firstName:"AJ", lastName:"Bilow", note:aLongString, item:105},  
    {firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106},     
    {firstName:"John", lastName:"Roo", note:aLongString, item:107}, 
]; 
 
// Assign the data provider to the DataGrid to populate it. 
// Note: This has to be done before applying the cellRenderers. 
aDg.dataProvider = new DataProvider(myDP); 
 
/* Set some basic grid properties. 
Note: The data grid's row height should reflect 
the number of lines you expect to show in the multiline cell. 
The cell renderer wil size to the row height. 
About 40 for 2 lines or 60 for 3 lines.*/ 
 
aDg.columns = ["firstName", "lastName", "note", "item"]; 
aDg.setSize(430,190); 
aDg.move(40,40); 
aDg.rowHeight = 40;// Allows for 2 lines of text at default text size. 
aDg.columns[0].width = 70; 
aDg.columns[1].width = 70; 
aDg.columns[2].width = 230; 
aDg.columns[3].width = 60; 
aDg.resizableColumns = true; 
aDg.verticalScrollPolicy = ScrollPolicy.AUTO; 
addChild(aDg); 
// Assign cellRenderers. 
var col3:DataGridColumn = new DataGridColumn(); 
col3 = aDg.getColumnAt(2); 
col3.cellRenderer = MultiLineCell;

4. FLA 파일을 MultiLineGrid.fla로 저장합니다.

5. 새 ActionScript 파일을 만듭니다.

6. 다음 ActionScript 코드를 [스크립트] 윈도우에 복사합니다.

package { 
 
 
    import fl.controls.listClasses.CellRenderer; 
 
    public class MultiLineCell extends CellRenderer 
    { 
         
        public function MultiLineCell() 
        {     
            textField.wordWrap = true; 
            textField.autoSize = "left"; 
        } 
        override protected function drawLayout():void {             
            textField.width = this.width; 
            super.drawLayout(); 
        } 
    } 
}

7.MultiLineGrid.fla를 저장한 폴더에 ActionScript 파일을 MultiLineCell.as로 저장합니다.

8.MultiLineGrid.fla 응용 프로그램으로 돌아와 [컨트롤] > [무비 테스트]를 선택합니다.

DataGrid는 다음과 비슷해야 합니다.

9. ultiLineGrid.fla 응용 프로그램의 DataGrid

머리글 스타일 설정

headerTextFormat 스타일을 사용하여 머리글 행의 텍스트 스타일을 설정할 수 있습니다. 다음 예제에서는 TextFormat 객체를 사용하여 headerTextFormat 스타일을 Arial 글꼴, 빨강 색상, 글꼴 크기 14 및 기울임체로 설정합니다.

새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
DataGrid 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aDg로 지정합니다.
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 코드를 입력합니다.

import fl.data.DataProvider; 
import fl.controls.dataGridClasses.DataGridColumn; 
 
var myDP:Array = new Array(); 
myDP = [{FirstName:"Winston", LastName:"Elstad"}, 
    {FirstName:"Ric", LastName:"Dietrich"},  
    {FirstName:"Ewing", LastName:"Canepa"},  
    {FirstName:"Kevin", LastName:"Wade"},      
    {FirstName:"Kimberly", LastName:"Dietrich"},  
    {FirstName:"AJ", LastName:"Bilow"},  
    {FirstName:"Chuck", LastName:"Yushan"},     
    {FirstName:"John", LastName:"Roo"}, 
]; 
 
// Assign the data provider to the DataGrid to populate it. 
// Note: This has to be done before applying the cellRenderers. 
aDg.dataProvider = new DataProvider(myDP); 
aDg.setSize(160,190); 
aDg.move(40,40); 
aDg.columns[0].width = 80; 
aDg.columns[1].width = 80; 
var tf:TextFormat = new TextFormat(); 
tf.size = 14; 
tf.color = 0xff0000; 
tf.italic = true; 
tf.font = "Arial" 
aDg.setStyle("headerTextFormat", tf);

4. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.

DataGrid 구성 요소에 스킨 사용

DataGrid 구성 요소는 다음과 같은 스킨을 사용하여 시각적 상태를 표현합니다.

DataGrid 스킨

CellRenderer 스킨은 DataGrid의 본문 셀에 사용되며 HeaderRenderer 스킨은 머리글 행에 사용됩니다. 다음 절차에서는 머리글 행의 배경색을 변경하지만 동일한 절차를 사용하여 CellRenderer 스킨을 편집하면 DataGrid 본문 셀의 배경색도 변경할 수 있습니다.

새 Flash 문서(ActionScript 3.0)를 만듭니다.
DataGrid 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aDg로 지정합니다.
DataGrid 구성 요소를 두 번 클릭하여 해당 스킨 팔레트를 엽니다.
확대/축소 컨트롤을 400%로 설정하여 아이콘을 편집하기 쉽게 확대합니다.
HeaderRenderer 스킨을 두 번 클릭하여 HeaderRenderer 스킨 팔레트를 엽니다.
Up_Skin을 두 번 클릭하여 심볼 편집 모드로 엽니다. 그런 다음 배경을 클릭하여 선택하고 속성 관리자에 [채움 색상] 선택기를 표시합니다.
[채움 색상] 선택기로 #00CC00 색상을 선택하여 HeaderRenderer 스킨의 배경에 적용합니다.
스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.
타임라인의 프레임 1에서 다음 코드를 [액션] 패널에 추가하여 DataGrid에 데이터를 추가합니다.import fl.data.DataProvider; bldRosterGrid(aDg); var aRoster:Array = new Array(); aRoster = [ {Name:"Wilma Carter",Home: "Redlands, CA"}, {Name:"Sue Pennypacker",Home: "Athens, GA"}, {Name:"Jill Smithfield",Home: "Spokane, WA"}, {Name:"Shirley Goth", Home: "Carson, NV"}, {Name:"Jennifer Dunbar",Home: "Seaside, CA"} ]; aDg.dataProvider = new DataProvider(aRoster); function bldRosterGrid(dg:DataGrid){ dg.setSize(400, 130); dg.columns = ["Name", "Home"]; dg.move(50,50); dg.columns[0].width = 120; dg.columns[1].width = 120; };
[컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 테스트합니다.

다음 그림과 같이 머리글 행의 배경이 녹색인 DataGrid가 나타나야 합니다.
머리글 행 배경이 사용자 정의된 DataGrid

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

출처: http://ubo.pe.kr/xe/index.php?mid=library&document_srl=1154

DataGrid에 Image넣기

미확인생물체

http://ubo.pe.kr/xe/1154

2010.10.21 15:15:39 (*.106.162.226)

3128

AS3

package Module
{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import fl.controls.dataGridClasses.DataGridCellEditor;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ListData;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.IOErrorEvent;

public class MyImageCellRenderer extends CellRenderer//

{
  private var _bitmap:Bitmap;
  private var _sprite:Sprite;

  public function MyImageCellRenderer()
  {
   _bitmap = new Bitmap();
   _sprite = new Sprite();
   addChild(_bitmap);
   addChild(_sprite);
   setStyle("upSkin",DataGridCellEditor_skin);
  }

  override public function set listData(newListData:ListData):void
  {
            _listData = newListData;
   textField.text = _listData.label
        }
  override public function get listData():ListData
  {
            return _listData;
        }
        override public function set data(newData:Object):void
  {
            _data = newData;
   _bitmap.bitmapData = new BitmapData(width,height);
   _bitmap.bitmapData.draw(_data.source);
   _sprite.graphics.lineStyle(1);
   _sprite.graphics.drawRect(1,1,width-2,height-2);
        }
  override public function get data():Object
  {
            return _data;
        }
    }
}

//USE

datagrid.CellRenderer = MyImageCellRenderer;

위 클래스는 CellRenderer를 재정의한 클래스이다.

자세한것은 ICellRenederer를 레퍼런서에서 찾아보길 권장한다.

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

출처: http://ubo.pe.kr/xe/index.php?mid=library&document_srl=1157

DataGrid 안에 CheckBox 넣기 (ICellRenderer)

미확인생물체

http://ubo.pe.kr/xe/1157

2010.10.21 16:03:33 (*.106.162.226)

3071

AS3

package Module
{
import fl.controls.CheckBox;
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ListData;
    import flash.events.Event;
    import fl.core.InvalidationType;
    import flash.events.MouseEvent;

    public class MyCheckCellRenderer extends CheckBox implements ICellRenderer
    {
        private var _listData:ListData;
        private var _data:Object;

        public function MyCheckCellRenderer()
        {
            super();
            addEventListener(MouseEvent.CLICK, onCheckClick);
        }

        public function set data(d:Object):void
        {
            _data = d;
            label = "";
        }

        public function get data():Object
        {
            return _data;
        }

        public function get listData():ListData
        {
            return _listData;
        }

        public function set listData(value:ListData):void {
            _listData = value;
        }

        override public function get selected():Boolean {
            return _selected;
        }

        override public function set selected(value:Boolean):void {
        }

        public function onCheckClick(e:MouseEvent)
        {
            _selected = !_selected;
            _data["checked"] = _selected;
        }
    }
}

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

출처: http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html

Filtering items in a data provider

When building applications you'll want to give the user a quick, easy way to filter data. For example, if you had a ComboBox, List, or DataGrid with several hundred (or even thousand) records, it could be very frustrating for users to scroll through a few hundred results to find a specific page or user name. If users are able to filter data quickly by typing the first few letters of a string, the results narrow down considerably.

Note: The following example requires both a DataGrid and TextInput component in the library.

Example

The following example displays a few different vegetables and allows users to find a specific vegetable by typing the first letter or two. The example filters items in a data provider based on the text in a TextInput component:

// Import the required component classes.
import fl.controls.DataGrid;
import fl.controls.TextInput;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

// Create and populate a new DataProvider object.
var dp:DataProvider = new DataProvider();
dp.addItem({item:"Asparagus", price:0.53});
dp.addItem({item:"Brussel Sprouts", price:0.27});
dp.addItem({item:"Cabbage", price:0.04});
dp.addItem({item:"Cauliflower", price:0.16});

// Create a new TextInput component instance and add it to the display list.
var itemTextInput:TextInput = new TextInput();
itemTextInput.move(10, 10);
itemTextInput.addEventListener(Event.CHANGE, changeHandler);
addChild(itemTextInput);

// Create a new DataGridColumn object.
var itemCol:DataGridColumn = new DataGridColumn("item");
itemCol.headerText = "Vegetable:";

/* Create a new DataGridColumn object, and assign a label function 
   and sort options. */
var priceCol:DataGridColumn = new DataGridColumn("price");
priceCol.headerText = "Price (per/lb):";
priceCol.labelFunction = priceLabelFunction;
priceCol.sortOptions = Array.NUMERIC;

/* Create a new DataGrid component instance, add the two DataGridColumn 
   objects created earlier, define the data provider and add the instance
   to the display list. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(itemCol);
myDataGrid.addColumn(priceCol);
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 40);
addChild(myDataGrid);

/* This function is used by the priceCol object's labelFunction property. This function
   formats each row of the associated data grid column (priceCol) and returns a currency
   formatted string. */
function priceLabelFunction(item:Object):String {
    return "$" + Number(item.price).toFixed(2);
}

/* Handler function for the TextInput component instance. This function converts the
   data provider (dp) to an array using the DataProvider class's toArray() method, and 
   then filters the newly created array using the Array class's filter() method. Finally,
   the data grid's data provider property is set to the contents of the filtered array. */
function changeHandler(event:Event):void {
    var arr:Array = dp.toArray();
    var filteredArr:Array = arr.filter(filterDataProvider);
    myDataGrid.dataProvider = new DataProvider(filteredArr);
}

/* This function is called by the changeHandler() function and is used to filter the
   contents of an array. This function takes the current contents of the TextInput
   component instance and compares the contents against the current item in the array.
   If the strings match, the filterDataProvider() method returns true and the current 
   item is added to the new array. If the strings do not match, the method returns 
   false and the item is not added. */
function filterDataProvider(obj:Object, idx:int, arr:Array):Boolean {
    var txt1:String = itemTextInput.text;
    var txt2:String = obj.item.substr(0, txt1.length);
    if (txt1.toLowerCase() == txt2.toLowerCase()) {
        return true;
    }
    return false;
}

Result

To get the source files for this example, download section10_example1.zip from the top of this page.

Aligning text in data grid columns

You may have noticed in the previous example that even though the price is numeric, the column was aligned left (default). Often when displaying numbers in an application, you may want to align text right (or center) to make it easier to read.

Example

The following example lets you right-align values in a column by using a custom cell renderer. It formats the contents of a column by using a custom label function (dollarLabelFunction()), and then aligns the contents by setting the data grid column's cellRenderer property to a custom cell renderer (RightAlignCell):

// Import the required component classes.
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

// Create and populate a new DataProvider object.
var dp:DataProvider = new DataProvider();
dp.addItem({name:"Item 1", price:1234.00});
dp.addItem({name:"Item 2", price:56.30});
dp.addItem({name:"Item 3", price:789.12});

// Create a new DataGridColumn object.
var nameCol:DataGridColumn = new DataGridColumn("name");
nameCol.headerText = "Name:";

/* Create a new DataGridColumn object, assign a label function 
   and sort options, and specify a custom cell renderer. */
var priceCol:DataGridColumn = new DataGridColumn("price");
priceCol.headerText = "Price (USD):";
priceCol.labelFunction = dollarLabelFunction;
priceCol.sortOptions = Array.NUMERIC;
priceCol.cellRenderer = RightAlignCell;

/* Create a new DataGrid component instance, add the two DataGridColumn 
   objects created earlier, define the data provider and add the instance
   to the display list. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(nameCol);
myDataGrid.addColumn(priceCol);
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

/* This function is used by the priceCol object's labelFunction property. This function
   formats each row of the associated data grid column (priceCol) and returns a currency
   formatted string. */
function dollarLabelFunction(item:Object):String {
    return "$" + Number(item.price).toFixed(2);
}

The code for the RightAlignCell class is as follows:

package {
    /* Import the required classes. Note that since this is an external .AS file and 
       not an .FLA file, most classes will not be automatically imported for you. */
    import fl.controls.listClasses.CellRenderer;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    /**
     * The main class definition. Make sure the class is marked "public" and in the case
     * of our custom cell renderer, extends the CellRenderer class and implements the
     * ICellRenderer interface.
     */
    public class RightAlignCell extends CellRenderer implements ICellRenderer {
        // Create a new private variable to hold the custom text format.
        private var tf:TextFormat;

        /**
         * This method defines the TextFormat object and sets the align
         * property to "right".
         */
        public function RightAlignCell() {
            tf = new TextFormat();
            tf.align = TextFormatAlign.RIGHT;
        }

        /**
         * Override the inherited drawLayout() method from the CellRenderer class.
         * This method sets the text field's width to the width of the data grid column,
         * applies the new text format using the setTextFormat() method, and calls the
         * parent class's drawLayout() method. 
         */
        override protected function drawLayout():void {
            textField.width = this.width;
            textField.setTextFormat(tf);
            super.drawLayout();
        }
    }
}

The custom RightAlignCell class extends the CellRenderer class (fl.controls.listClasses.CellRenderer) and creates a new TextFormat object in the RightAlignCell class's constructor method. Next, the CellRenderer class'sdrawLayout() method is overridden, and the custom TextFormat object is applied to the cell's internal TextField object using the setTextFormat() method.

Result

To get the source files for this example, download section11_example1.zip from the top of this page.

Alternating background colors in a data grid

When displaying large amounts of data in a data grid, it's easier to see the rows if they have alternating row colors. You need to create two new symbols in the Flash document's library for this sample to work. The easiest way to do this is to duplicate an existing cell renderer skin in the library (such as CellRenderer_upSkin in the Library panel's Component Assets/CellRendererSkins folder, see Figure 1) and modify the asset as desired. Once you've finished creating the desired skins for the alternating row color backgrounds, you'll need to set up a linkage and give the symbol a class name of "CellRenderer_upSkinGray" and "CellRenderer_upskinDarkGray."

Figure 1. CellRenderer_upSkin symbol in the Flash document's Library panel

Once both the CellRenderer_upSkinDarkGray and CellRenderer_upSkinGray assets have been created, right-click the CellRenderer_upSkinDarkGray asset in the Library panel and select Linkage to open the Linkage Properties dialog box.
From this dialog box, click the Export for ActionScript check box, assign a class name of CellRenderer_upSkinDarkGray and leave the base class text field as flash.display.MovieClip.
Click OK.
Repeat these steps for the CellRenderer_upSkinGray asset, giving it a class name of CellRenderer_upSkinGray (see Figure 2).

Figure 2. Setting the class name for the CellRenderer_upSkinGray asset in the library

Example

The following example creates ten items in a data grid and alternates the data grid row's background colors based on the row's current index:

// Import the required component classes.
import fl.controls.DataGrid;
import fl.data.DataProvider;

// Create and populate a new DataProvider object.
var dp:DataProvider = new DataProvider();
dp.addItem({label:"Item a", data:0});
dp.addItem({label:"Item b", data:1});
dp.addItem({label:"Item c", data:2});
dp.addItem({label:"Item d", data:3});
dp.addItem({label:"Item e", data:4});
dp.addItem({label:"Item f", data:5});
dp.addItem({label:"Item g", data:6});
dp.addItem({label:"Item h", data:7});
dp.addItem({label:"Item i", data:8});
dp.addItem({label:"Item j", data:9});

/* Create a new DataGrid component instance, add two data grid columns, 
   define the data provider and add the instance to the display list. This 
   code also sets the cellRenderer style on the data grid by using the
   setStyle() method and specifies the custom cell renderer class to use. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("label");
myDataGrid.addColumn("data");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length;
myDataGrid.move(10, 10);
myDataGrid.setStyle("cellRenderer", AlternatingRowColors);
addChild(myDataGrid);

The AlternatingRowColors class is as follows:

package {
    // Import the required component classes.
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;

    /**
     * This class sets the upSkin style based on the current item's index in a list.
     * Make sure the class is marked "public" and in the case of our custom cell renderer, 
     * extends the CellRenderer class and implements the ICellRenderer interface.
     */
    public class AlternatingRowColors extends CellRenderer implements ICellRenderer {

        /**
         * Constructor.
         */
        public function AlternatingRowColors():void {
            super();
        }

        /**
         * This method returns the style definition object from the CellRenderer class.
         */
        public static function getStyleDefinition():Object {
            return CellRenderer.getStyleDefinition();
        }

        /** 
         * This method overrides the inherited drawBackground() method and sets the renderer's
         * upSkin style based on the row's current index. For example, if the row index is an
         * odd number, the upSkin style is set to the CellRenderer_upSkinDarkGray linkage in the 
         * library. If the row index is an even number, the upSkin style is set to the 
         * CellRenderer_upSkinGray linkage in the library.
         */
        override protected function drawBackground():void {
            if (_listData.index % 2 == 0) {
                setStyle("upSkin", CellRenderer_upSkinGray);
            } else {
                setStyle("upSkin", CellRenderer_upSkinDarkGray);
            }
            super.drawBackground();
        }
    }
}

Save the previous code in the same directory as your Flash document and give it a filename of AlternatingRowColors.as.

The custom AlternatingRowColors class extends the CellRenderer class and implements the ICellRenderer interface. This class overrides the drawBackground() method from the CellRenderer class and determines which upSkin to use for the current data grid row's background based on the current row's index. If the row index is an even number, the data grid sets the upSkin style to CellRender_upSkinGray, otherwise the CellRenderer_upSkinDarkGray is used.

Note: The alternating background skins are applied using the setStyle() method in the drawBackground()method in the custom cell renderer above. For this example to work, you need to create two new skins in your library and make sure they are exported for ActionScript: CellRenderer_upSkinGray and CellRenderer_upSkinDarkGray.

Result

To get the source files for this example, download section12_example1.zip from the top of this page.

Setting background color based on a row's data

When customizing the layout of a data grid, you may not always want row colors to be alternated based on their row index. In some cases, you may want to set a row's background color based on the value of a field or on a certain set of criteria.

The following example first creates a DataGrid component instance and then alternates row colors based on the value of the data provider's rowColor property.

Note: The alternating background skins are applied using the setStyle() method in the drawBackground()method in the CustomRowColors class below. For this example to work, you need to create two new skins in your library and make sure they are exported for ActionScript: CellRenderer_upSkinGreen and CellRenderer_upSkinRed. For more information, see the previous example, Alternating background colors in a data grid.

Example

// Import the required component classes.
import fl.controls.DataGrid;
import fl.data.DataProvider;

// Create and populate a new DataProvider object.
var dp:DataProvider = new DataProvider();
dp.addItem({label:"Item a", data:0, rowColor:"green"});
dp.addItem({label:"Item b", data:1, rowColor:"green"});
dp.addItem({label:"Item c", data:2, rowColor:"green"});
dp.addItem({label:"Item d", data:3, rowColor:"green"});
dp.addItem({label:"Item e", data:4, rowColor:"red"});
dp.addItem({label:"Item f", data:5, rowColor:"red"});
dp.addItem({label:"Item g", data:6, rowColor:"green"});
dp.addItem({label:"Item h", data:7, rowColor:"red"});
dp.addItem({label:"Item i", data:8, rowColor:"green"});
dp.addItem({label:"Item j", data:9, rowColor:"green"});

/* Create a new DataGrid component instance, add two data grid columns, 
   define the data provider and add the instance to the display list. This 
   code also sets the cellRenderer style on the data grid by using the
   setStyle() method and specifies the custom cell renderer class to use. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("label");
myDataGrid.addColumn("data");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length;
myDataGrid.move(10, 10);
myDataGrid.setStyle("cellRenderer", CustomRowColors);
addChild(myDataGrid);

The CustomRowColors class is as follows:

package {
    // Import the required component classes.
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;

    /**
     * This class sets the upSkin style based on the current item's rowColor value 
     * in the data provider.
     * Make sure the class is marked "public" and in the case of our custom cell renderer, 
     * extends the CellRenderer class and implements the ICellRenderer interface.
     */
    public class CustomRowColors extends CellRenderer implements ICellRenderer {

        /**
         * Constructor.
         */
        public function CustomRowColors():void {
            super();
        }

        /**
         * This method returns the style definition object from the CellRenderer class.
         */
        public static function getStyleDefinition():Object {
            return CellRenderer.getStyleDefinition();
        }

        /** 
         * This method overrides the inherited drawBackground() method and sets the renderer's
         * upSkin style based on the row's rowColor value in the data provider. For example, 
         * if the item's rowColor value is "green," the upSkin style is set to the 
         * CellRenderer_upSkinGreen linkage in the library. If the rowColor value is "red," the
         * upSkin style is set to the CellRenderer_upSkinRed linkage in the library.
         */
        override protected function drawBackground():void {
            switch (data.rowColor) {
                case "green" :
                    setStyle("upSkin", CellRenderer_upSkinGreen);
                    break;
                case "red" :
                    setStyle("upSkin", CellRenderer_upSkinRed);
                    break;
                default :
                    break;
            }
            super.drawBackground();
        }
    }
}

The drawBackground() method above checks the value of the current row's rowColor property and, depending on the value, selects either the CellRenderer_upSkinGreen or CellRenderer_upSkinRed asset from the library.

To select a skin style based on the value of the row's data property, use code similar to the following:

override protected function drawBackground():void { /* If the data property in the data provider is less than 4, the upSkin style is set to the CellRenderer_upSkinRed linkage in the library. */ if (data.data < 4) { setStyle("upSkin", CellRenderer_upSkinRed); } super.drawBackground(); }

If the value of the row's data property is less than 4, the row's upSkin will be set to CellRenderer_upSkinRed; otherwise, the default skin will be used.

Result

To get the source files for this example, download section13_example1.zip from the top of this page.

Embedding components into data grid cells

Often when building applications you may want to embed other component instances into a data grid. For example, you could embed a check box or combo box component instance into a cell so that a user is forced to select options from a predefined set of values instead of typing a value into an editable cell. You may also want to embed a UILoader component instance in a cell to display an image or library symbol—useful to show a book's cover image, a flag, or just a series of thumbnail images with their file names and file properties.

Before testing this example, you need to have two movie clip assets in your Flash document's library and give them class names Bear and Lion, respectively (see Figure 3).

Figure 3. Flash document's library (top) and linkage properties (bottom) for the Bear movie clip symbol

The following example demonstrates how you can create a custom cell renderer for a data grid column which will load external images or images from the Flash document's library.

Example

The following example creates a DataGrid component instance which loads three external JPEG images, as well as two assets from the Flash document's library. Next, the cellRenderer property of a DataGridColumn object is set to the custom cell renderer class, LoaderCellRenderer:

// Import the required component classes.
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

/* Create and populate a new DataProvider object. Note that three of the items
   in the data provider refer to externally-loaded images, whereas the last two
   items refer to symbol linkages in the library. */
var dp:DataProvider = new DataProvider();
dp.addItem({data:"http://www.helpexamples.com/flash/images/image1.jpg", title:"image1.jpg"});
dp.addItem({data:"http://www.helpexamples.com/flash/images/image2.jpg", title:"image2.jpg"});
dp.addItem({data:"http://www.helpexamples.com/flash/images/image3.jpg", title:"image3.jpg"});
dp.addItem({data:"Bear", title:"Bear.jpg"});
dp.addItem({data:"Lion", title:"Lion.jpg"});

// Create a new DataGridColumn object, and specify a custom cell renderer.
var dataCol:DataGridColumn = new DataGridColumn("data");
dataCol.cellRenderer = LoaderCellRenderer;

// Create a new DataGridColumn object.
var titleCol:DataGridColumn = new DataGridColumn("title");

/* Create a new DataGrid component instance, add the two DataGridColumn 
   objects created earlier, define the data provider and add the instance
   to the display list. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(dataCol);
myDataGrid.addColumn(titleCol);
myDataGrid.dataProvider = dp;
myDataGrid.rowHeight = 64;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length - 1;
myDataGrid.move(10, 10);
addChild(myDataGrid);

The LoaderCellRenderer class is as follows:

package {
    // Import the required component classes.
    import fl.containers.UILoader;
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ListData;
    import fl.core.InvalidationType;
    import fl.data.DataProvider;
    import flash.events.Event;

    /**
     * This class creates a custom cell renderer which displays an image in a cell.
     * Make sure the class is marked "public" and in the case of our custom cell renderer, 
     * extends the UILoader class and implements the ICellRenderer interface.
     */
    public class LoaderCellRenderer extends UILoader implements ICellRenderer {
        protected var _data:Object;
        protected var _listData:ListData;
        protected var _selected:Boolean;

        /**
         * Constructor.
         */
        public function LoaderCellRenderer():void {
            super();
        }

        /**
         * Gets or sets the cell's internal _data property.
         */
        public function get data():Object {
            return _data;
        }
        /** 
         * @private (setter)
         */
        public function set data(value:Object):void {
            _data = value;
            source = value.data;
        }

        /**
         * Gets or sets the cell's internal _listData property.
         */
        public function get listData():ListData {
            return _listData;
        }
        /**
         * @private (setter)
         */
        public function set listData(value:ListData):void {
            _listData = value;
            invalidate(InvalidationType.DATA);
            invalidate(InvalidationType.STATE);
        }

        /**
         * Gets or sets the cell's internal _selected property.
         */
        public function get selected():Boolean {
            return _selected;
        }
        /**
         * @private (setter)
         */
        public function set selected(value:Boolean):void {
            _selected = value;
            invalidate(InvalidationType.STATE);
        }

        /**
         * Sets the internal mouse state.
         */
        public function setMouseState(state:String):void {
        }
    }
}

Result

To get the source files for this example, download section14_example1.zip from the top of this page.

Where to go from here

For further information about this topic, see Creating, populating, and resizing the DataGrid component (Part 1 of 3) and Customizing and sorting the DataGrid component (Part 2 of 3). For more information about the ActionScript 3.0 DataGrid component:

"Using the DataGrid" in Using ActionScript 3.0 Components
The DataGrid class in the ActionScript 3.0 Components and Language Reference
The CellRenderer class in the ActionScript 3.0 Components and Language Reference

Related Flash Quick Starts

More Like This

Comments (21)

Comments

hecatJanuary 19, 2009
Great examples. I am looking for a renderer that draws an icon in a given cell. Similar to the LoaderCellRenderer but instead of an external image I would want to use a graphic symbol from my library. Can you point me to an example of this ?

Thanks again.
DENNIS NOMERJuly 16, 2009
I used your image cell renderer, and it worked. However, I am using it to load a graphic button, and the button (when clicked) causes that row to be deleted from the data provider and the grid (this is intended). When the rows close up and the mouse is still over that column, it does not render the image, but renders the name of the movieclip in the library, until you click off somewhere. That's a bit buggy.
KOLANICH KOLANICHAugust 24, 2009
package {
     // Import the required component classes.
     import fl.controls.listClasses.ICellRenderer;
     import fl.controls.listClasses.ListData;
     import fl.core.InvalidationType;
     import fl.data.DataProvider;
  import fl.controls.Label;

     public class linkRenderer extends Label implements ICellRenderer {
         protected var _data:Object;
         protected var _listData:ListData;
         protected var _selected:Boolean;


         public function linkRenderer():void {
             super();
         }


         public function get data():Object {
             return _data;
         }

         public function set data(value:Object):void {
             _data = value;
    trace (value);
             htmlText = '<a href="'+value.data+'">'+value.data+'</a>';
         }


         public function get listData():ListData {
             return _listData;
         }

         public function set listData(value:ListData):void {
             _listData = value;
             invalidate(InvalidationType.DATA);
             invalidate(InvalidationType.STATE);
         }

         public function get selected():Boolean {
             return _selected;
         }

         public function set selected(value:Boolean):void {
             _selected = value;
             invalidate(InvalidationType.STATE);
         }


         public function setMouseState(state:String):void {
         }
     }
}

doesn`t work
writes undefined in cell
if i change value.data to value it writes [object Object]
Dario MassarentiSeptember 7, 2009
Is there a way through AS3 code to set individual row height in the datagrid based on the data present in that row ? Can you provide an example ?

Thanks
Gianluca De GiosaFebruary 24, 2010
Hi, in  RightAlignCell class missing:

import fl.controls.listClasses.ICellRenderer;
Alek JomanMarch 12, 2010
Hi, all

How would I have to change the script so I can load more then 1 img within the same row. This is what I did (following the above example) but it simply repeats the first image in the cell next by.

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem({data:"http://www.helpexamples.com/flash/images/image1.jpg", data:"http://www.helpexamples.com/flash/images/image2.jpg", title:"image1.jpg"});

var dataCol:DataGridColumn = new DataGridColumn("data");
var dataCol1:DataGridColumn = new DataGridColumn("data1");
dataCol.cellRenderer = LoaderCellRenderer;
dataCol1.cellRenderer = LoaderCellRenderer;

var titleCol:DataGridColumn = new DataGridColumn("title");

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(dataCol);
myDataGrid.addColumn(dataCol1);
myDataGrid.addColumn(titleCol);
myDataGrid.dataProvider = dp;
myDataGrid.rowHeight = 64;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length - 1;
myDataGrid.move(10, 10);
addChild(myDataGrid);
Linda EdwardsAugust 26, 2010
Mistake!
In example: Embedding components into data grid cells

The code:
dp.addItem({data:"Bear", title:"Bear.jpg"});
dp.addItem({data:"Lion", title:"Lion.jpg"});

should read:
dp.addItem({data:"Bear.jpg", title:"Bear.jpg"});
dp.addItem({data:"Lion.jpg", title:"Lion.jpg"});
Peter deHaan (Adobe)August 28, 2010
@Linda Edwards,

I don't believe that is a mistake. The "Bear" and "Lion" in the code do not refer to a dynamically loaded image (unlike the previous three items in the data provider). Instead the "Bear" and "Lion" refer to embedded assets in the Flash document's library. If you check the FLA file and right click on the "Bear" movie clip, and select Properties, you'll see that the symbol is being exported for ActionScript and the class name is specified as "Bear".

Peter
Tim WoodDecember 17, 2010
Great tutorial - exactly what I was after.
Having a problem, I'm a bit out of my depth. I'm loading in a movieclip into a cell as per your last example and I'd really like to be able to make it jump to a particular frame. Something like, this:

dp.addItem({data:"Badger", frame:"smile", title:"Happy Badger"});
dp.addItem({data:"Badger", frame:"frown", title:"Angry Badger"});

All clues very welcome. Cheers.
sunil shawFebruary 4, 2011
How would I have to change the script so I can load more then 1 img within the same row. i also
tried like that...but only first image is coming both coloumn of same row............can anyone give me idea to solve this............
sunil shawFebruary 4, 2011
i used like that.............
myDataGrid.addItem({Feature:FeatureList[i],data:"tick",data:"wrong"});
but in both coloumn of that row same "tick" picture is coming,"wrong" pic is not coming............
please give me some idea so that i can proceed in my project............
kglad(Moderator)February 5, 2011
@tim w & sunil s:

post your issues in the appropriate adobe forum.  you'll get more help:

http://forums.adobe.com/community/flash/flash_actionscript3?view=discussions&start=0
vowievelascoMarch 31, 2011
can someone help me on having a scroll bar on my cell in my DataGrid.
kglad(Moderator)April 1, 2011
@V V

read the comment above yours.
sh0ckwavJune 18, 2011
R U kidding me? Why is it that difficult to style a row? A simple setRowStyle implementation would have been ideal. Now I know why I NEVER use components! Flash Components = FAIL!

Here's the simple way to style a row:

   var cr:CellRenderer;
   var row:int; //SET DESIRED ROW
   for (var i:int; i < dataGrid.columns.length; ++i)
   {
    cr = dataGrid.getCellRendererAt(row, i) as CellRenderer;
    cr.setStyle("upSkin", CellRenderer_customSkin);
   }

WOW! 5 lines of code to do what the majority of what this article is about. Obfuscated!
ant and beeJuly 5, 2011
embed Image inside data gird is great, but the Border of image in datagrid didn't work... how can I show cell's border of image? does anyone help me?
frumentiosSeptember 1, 2011
I would like to filter my data using buttons rather than the TextInput component. I have a list of electronics items that I would like to filter by power ranges, e.g., <20 W, 20-90 W, 90-150 W, etc. I would like to assign each of these range an ID and then, when a user selects that ID, they get only the listings within that range. Is there a way to tweak your filtering example to do this? Thanks.
Jason McDonaldSeptember 5, 2011
about changing the color of different rows based on row data, i had this problem:

I only wanted some of the rows to be red based if the field name "date" was over a year and I wanted the row to be yellow if the field name "date" was over 9 months. So every other row would be default.

When I tried to do this on a datagrid with a lot of rows, however, everytime I scrolled down and then scrolled back up all of the rows that were supposed to be default that I hadn't set changed colors to yellow. I was going crazy!

I then realized I hadn't set a value for the default, and when I added a case in my switch statement to also set the value of the neutral cells, it solved my problem. Here's the lines of code I added, notice I've also set what should happen if the cell is supposed to not be yellow or red, which assigns it the default skin:

  switch (data.dateDifference) {
                 case "yellow" :
                     setStyle("upSkin", CellRenderer_upSkinYellow);
                     break;
                 case "red" :
                     setStyle("upSkin", CellRenderer_upSkinRed);
                     break;
                 case "neutral" :
                     setStyle("upSkin", CellRenderer_upSkin);
                     break;
             }


Problem solved.

Thanks so much for this article, other than that tiny issue it's been extremely helpful :)
Jason McDonaldSeptember 5, 2011
Brief addition to my last comment: This may seem obvious by my last post, but if you want to set the characteristics for the other skin states (i.e. the up state, down state, selected state, etc.), then you also need to set the styles for the neutral state as well.


switch (data.dateDifference) {
                 case "yellow" :
                     setStyle("upSkin", CellRenderer_upSkinYellow);
      setStyle("overSkin", CellRenderer_overSkinYellow);
      setStyle("selectedUpSkin", CellRenderer_overSkinYellow);
      setStyle("selectedOverSkin", CellRenderer_overSkinYellow);
                     break;
                 case "red" :
                     setStyle("upSkin", CellRenderer_upSkinRed);
      setStyle("overSkin", CellRenderer_overSkinRed);
      setStyle("selectedUpSkin", CellRenderer_overSkinRed);
      setStyle("selectedOverSkin", CellRenderer_overSkinRed);
                     break;
                 case "green" :
                      setStyle("upSkin", CellRenderer_upSkin);
      setStyle("overSkin", CellRenderer_overSkin);
      setStyle("selectedUpSkin", CellRenderer_overSkin);
      setStyle("selectedOverSkin", CellRenderer_overSkin);
                     break;
             }


take care world.
Jason McDonaldSeptember 5, 2011
oops, it says "green" in the post before when it was supposed to say "neutral". here's the final code and i'm off to dinner:


switch (data.dateDifference) {
                  case "yellow" :
                      setStyle("upSkin", CellRenderer_upSkinYellow);
       setStyle("overSkin", CellRenderer_overSkinYellow);
       setStyle("selectedUpSkin", CellRenderer_overSkinYellow);
       setStyle("selectedOverSkin", CellRenderer_overSkinYellow);
                      break;
                  case "red" :
                      setStyle("upSkin", CellRenderer_upSkinRed);
       setStyle("overSkin", CellRenderer_overSkinRed);
       setStyle("selectedUpSkin", CellRenderer_overSkinRed);
       setStyle("selectedOverSkin", CellRenderer_overSkinRed);
                      break;
                  case "neutral" :
                       setStyle("upSkin", CellRenderer_upSkin);
       setStyle("overSkin", CellRenderer_overSkin);
       setStyle("selectedUpSkin", CellRenderer_overSkin);
       setStyle("selectedOverSkin", CellRenderer_overSkin);
                      break;
              }
Vladimir KopylcovSeptember 20, 2011
Great article! Thanks!
But I have a problem like ant and bee wrote on July 5, 2011. Borders of cell with image disappear. How can I show cell's border of image?

Please sign in to post a comment.

Sample files

section10_example1.zip (490 KB)

section11_example1.zip (456 KB)

section12_example1.zip (456 KB)

section13_example1.zip (456 KB)

section14_example1.zip (590 KB)

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

출처: http://thesunrises.tistory.com/145

데이터 그리드의 horizontalGridLineColor, horizontalGridLines를 설정하면 row마다 줄이 보인다
그런데 전체 row 라인이 보여주는 기능이 되어 있어
부분 라인 보여주는 기능을 한번 건드려봤다

datagrid_rowLineYN(2).zip

0.00MB

아래 소스(mxml)는 라이브독에 Example 소스를 약~간! 수정한 소스이다
기존 소스에서 수정한 부분은 다른 색으로 구분하였다

mxml

<?xml version="1.0" encoding="utf-8"?>

   xmlns:local="*">
   <mx:XMLList id="employees">
        <employee line="false">
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="false">
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="true">
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee line="false">
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Select a row in the DataGrid control. "/>

        <local:uDataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}"
           horizontalGridLineColor="#000000" horizontalGridLines="true">
            <local:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </local:columns>
        </local:uDataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>

</mx:Application>

다음은 기존 데이터 그리드를 상속받아서 Row Line 추가되는 부분을 설정된 값에 따라 추가여부를 설정 하였다

uDataGrid.as

package
{
    import mx.controls.DataGrid;
    import mx.controls.listClasses.ListBaseContentHolder;

    public class uDataGrid extends DataGrid
    {
        public function uDataGrid()
        {
            super();
        }
        //drawLinesAndColumnGraphics
        import flash.display.Sprite;
        import mx.core.UIComponent;
        import mx.controls.dataGridClasses.DataGridColumn;
        override protected function drawLinesAndColumnGraphics(contentHolder:ListBaseContentHolder, visibleColumns:Array, separators:Object):void
        {
            //super.drawLinesAndColumnGraphics(contentHolder, visibleColumns, separators);
            var lines:Sprite = Sprite(contentHolder.getChildByName("lines"));
            if (!lines)
            {
                lines = new UIComponent();
                lines.name = "lines";
                lines.cacheAsBitmap = true;
                lines.mouseEnabled = false;
                contentHolder.addChild(lines);
            }
            contentHolder.setChildIndex(lines, contentHolder.numChildren - 1);
            var rowInfo:Array = contentHolder.rowInfo;

            lines.graphics.clear();

            var linesBody:Sprite = Sprite(lines.getChildByName("body"));

            if (!linesBody)
            {
                linesBody = new UIComponent();
                linesBody.name = "body";
                linesBody.mouseEnabled = false;
                lines.addChild(linesBody);
            }

            linesBody.graphics.clear();
            while (linesBody.numChildren)
            {
                linesBody.removeChildAt(0);
            }


            var tmpHeight:Number = unscaledHeight - 1; // FIXME: can remove?
            var lineCol:uint;

            var i:int;

            var len:uint = visibleColumns ? visibleColumns.length : 0;
            var rowlen:uint = contentHolder.listItems.length

            // draw horizontalGridlines if needed.
            lineCol = getStyle("horizontalGridLineColor");
            if (getStyle("horizontalGridLines"))
            {
                for (i = 0; i < rowlen; i++)
                {
                    var yy:Number = rowInfo[i].y + rowInfo[i].height;

                    // listItems.length = RowCount
                    // 데이터가 rowCount 보다 적을 경우 데이터가 없기때문에 에러가 난다
                    if (contentHolder.listItems[i].length > 0)
                    {
                        // listItems[i][0].data 에는 XML 데이터가 들어 있다
                        if (contentHolder.listItems[i][0].data.@line=="true")
                        {
                            // 라인 추가
                            if (yy < contentHolder.height)
                                drawHorizontalSeparator(linesBody, i, lineCol, yy);
                        }
                    }


                }
            }
            /*
            if (separators.top)
                drawHorizontalSeparator(linesBody, i++, 0, rowInfo[0].y, true);
            if (separators.bottom && rowlen > 0)
                drawHorizontalSeparator(linesBody, i++, 0, rowInfo[rowlen - 1].y + rowInfo[rowlen - 1].height, true);

            var vLines:Boolean = getStyle("verticalGridLines");
            lineCol = getStyle("verticalGridLineColor");

            if (len)
            {
                var colBGs:Sprite = Sprite(contentHolder.getChildByName("colBGs"));
                // traverse the columns, set the sizes, draw the column backgrounds
                var lastChild:int = -1;
                var xx:Number = 0;
                for (i = 0; i < len; i++)
                {
                    // only draw the vertical separator for the ones in the middle (not beginning and not end)
                    if (vLines && i < (len - 1))
                        drawVerticalSeparator(linesBody, i, lineCol, xx + visibleColumns[i].width);

                    var col:DataGridColumn = visibleColumns[i];
                    var bgCol:Object;
                    if (enabled)
                        bgCol = col.getStyle("backgroundColor");
                    else
                        bgCol = col.getStyle("backgroundDisabledColor");

                    if (bgCol !== null && !isNaN(Number(bgCol)))
                    {
                        if (!colBGs)
                        {
                            colBGs = new FlexSprite();
                            colBGs.mouseEnabled = false;
                            colBGs.name = "colBGs";
                            contentHolder.addChildAt(colBGs, contentHolder.getChildIndex(contentHolder.getChildByName("rowBGs")) + 1);
                        }
                        drawColumnBackground(colBGs, i, Number(bgCol), col);
                        lastChild = i;
                    }
                    else if (colBGs)
                    {
                        var background:Shape = Shape(colBGs.getChildByName(i.toString()));
                        if (background)
                        {
                            var g:Graphics = background.graphics;
                            g.clear();
                            colBGs.removeChild(background);
                        }
                    }
                    xx += visibleColumns[i].width;
                }
                if (colBGs && colBGs.numChildren)
                {
                    while (colBGs.numChildren)
                    {
                        var bg:DisplayObject = colBGs.getChildAt(colBGs.numChildren - 1);
                        if (parseInt(bg.name) > lastChild)
                            colBGs.removeChild(bg);
                        else
                            break;
                    }
                }

            }

            if (separators.right && visibleColumns && visibleColumns.length)
            {
                if (contentHolder.listItems.length && contentHolder.listItems[0].length)
                    drawVerticalSeparator(linesBody, i++, 0, contentHolder.listItems[0][len - 1].x + visibleColumns[len - 1].width, true);
                else
                {
                    xx = 0;
                    for (i = 0; i < len; i++)
                    {
                        xx += visibleColumns[i].width;
                    }
                    drawVerticalSeparator(linesBody, i++, 0, xx, true);
                }
            }
            if (separators.left)
                drawVerticalSeparator(linesBody, i++, 0, 0, true);
            */
        }
        import mx.core.IFlexDisplayObject;
        import flash.display.DisplayObject;
        import mx.styles.ISimpleStyleClient;
        private var lockedColumnWidth:Number = 0;
        private var displayWidth:Number;
        private function drawHorizontalSeparator(s:Sprite, rowIndex:int, color:uint, y:Number, useLockedSeparator:Boolean = false):void
        {
            var hSepSkinName:String = "hSeparator" + rowIndex;
            var hLockedSepSkinName:String = "hLockedSeparator" + rowIndex;
            var createThisSkinName:String = useLockedSeparator ? hLockedSepSkinName : hSepSkinName;
            var createThisStyleName:String = useLockedSeparator ? "horizontalLockedSeparatorSkin" : "horizontalSeparatorSkin";

            var sepSkin:IFlexDisplayObject;
            var lockedSepSkin:IFlexDisplayObject;
            var deleteThisSkin:IFlexDisplayObject;
            var createThisSkin:IFlexDisplayObject;

            // Look for separator by name
            sepSkin = IFlexDisplayObject(s.getChildByName(hSepSkinName));
            lockedSepSkin = IFlexDisplayObject(s.getChildByName(hLockedSepSkinName));

            createThisSkin = useLockedSeparator ? lockedSepSkin : sepSkin;
            deleteThisSkin = useLockedSeparator ? sepSkin : lockedSepSkin;

            if (deleteThisSkin)
            {
                s.removeChild(DisplayObject(deleteThisSkin));
                //delete deleteThisSkin;
            }

            if (!createThisSkin)
            {
                var sepSkinClass:Class = Class(getStyle(createThisStyleName));

                if (sepSkinClass)
                {
                    createThisSkin = IFlexDisplayObject(new sepSkinClass());
                    createThisSkin.name = createThisSkinName;

                    var styleableSkin:ISimpleStyleClient = createThisSkin as ISimpleStyleClient;
                    if (styleableSkin)
                        styleableSkin.styleName = this;

                    s.addChild(DisplayObject(createThisSkin));
                }
            }

            if (createThisSkin)
            {
                var mHeight:Number = !isNaN(createThisSkin.measuredHeight) ? createThisSkin.measuredHeight : 1;
                createThisSkin.setActualSize(displayWidth - lockedColumnWidth, mHeight);
                createThisSkin.move(0, y);
            }
            else // If we still don't have a sepSkin, then we have no skin style defined. Use the default function instead
            {
                drawHorizontalLine(s, rowIndex, color, y);
            }

        }

    }
}

[# FLEX2 접기]

uDataGrid.as

package
{
import mx.controls.DataGrid;
import mx.controls.listClasses.ListBaseContentHolder;
import mx.core.mx_internal;

public class uDataGrid extends DataGrid
{
  public function uDataGrid()
  {
   super();
  }
  private var _headerVisible:Boolean;
  mx_internal function get headerVisible():Boolean
     {
     _headerVisible = showHeaders && (headerHeight > 0);
         return _headerVisible;
     }

  import flash.display.Sprite;
  import mx.core.UIComponent;
  override protected function drawLinesAndColumnBackgrounds():void
  {
   super.drawLinesAndColumnBackgrounds();

   var lines:Sprite = Sprite(listContent.getChildByName("lines"));
   lines.graphics.clear();

         var lineCol:uint;
         lineCol = getStyle("horizontalGridLineColor");

   var i:int;
   var idx:int=0;
   if (getStyle("horizontalGridLines"))
         {

             for (i = _headerVisible ? 1 : 0; i < listItems.length; i++)
             {

             if (idx <= dataProvider.length)
             {

               if (dataProvider.length!=idx)
               {
                if (dataProvider[idx].@line == "true")
                {
                 // @line = true row라인 생성
        drawHorizontalLine(lines, i+1, lineCol, rowInfo[i+1].y + rowInfo[i+1].height);
                }
                else {
                 // @line = false row라인 생성
                 drawHorizontalLine(lines, i+1, 0x00FF00, rowInfo[i+1].y + rowInfo[i+1].height);
                }
              }
              else {
       // @line = false row라인 생성
       // 마지막 라인 : 왜 마지막 라인이 생성이 안되는지 ... 편법으로 집어넣은 코드
                drawHorizontalLine(lines, i+1, 0x00FF00, rowInfo[i+1].y + rowInfo[i+1].height);
              }
             }
             else {
               // 기타 라인 생성
               drawHorizontalLine(lines, i, 0x0000FF, rowInfo[i].y + rowInfo[i].height);
             }
             idx+=1;
             }
         }
         else if (lockedRowCount > (_headerVisible ? 1 : 0) && lockedRowCount < listItems.length)
         {
         if (dataProvider[i].@line != "true")
     drawHorizontalLine(lines, lockedRowCount - 1, lineCol, rowInfo[lockedRowCount - 1].y + rowInfo[lockedRowCount - 1].height);
         }

}

}
}

MXML

아래 소스는 라이브독에서 예제로 나와 있는 소스 약간 수정한 내용입니다 (파일 첨부와 같습니다)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:local="*">
<mx:XMLList id="employees">
        <employee line="false">
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="false">
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="true">
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee line="false">
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

<mx:Panel title="DataGrid Control Example" height="100%" width="100%"
paddingTop="10" paddingLeft="10" paddingRight="10">

<mx:Label width="100%" color="blue"
text="Select a row in the DataGrid control. "/>

        <local:uDataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}"
        horizontalGridLineColor="#FF8000" horizontalGridLines="true">
            <local:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </local:columns>
        </local:uDataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>

</mx:Application>

[# FLEX2 접기]

datagrid_rowLineYN(2).zip

0.00MB

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

기타 링크
http://help.adobe.com/ko_KR/AS2LCR/Flash_10.0/help.html?content=00001984.html
http://www.sephiroth.it/tutorials/flashPHP/cellRenderer/index.php http://www.adobe.com/support/documentation/en/flash/fl8/samples.html
http://download.macromedia.com/pub/documentation/en/flash/fl8/MultiLineCellRenderer.zip
http://www.flash-db.com/Tutorials/cellrenderer/
http://krasimirtsonev.com/blog/article/AS3-flex-Sort-DataGrid-DataGridColumn-which-contains-custom-ItemRenderer http://kirill-poletaev.blogspot.com/2011/01/as3-datagrid-component-part-1.html

http://flexdesign.tistory.com/13

http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_2.html

http://workflowflash.com/173785/export-data-to-excel-from-spark-datagrid-2.php

http://stackoverflow.com/questions/2013922/datagrid-cell-render-with-custom-component

라인지우기:
http://thesunrises.tistory.com/145
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html

good~!:
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html

무비클립제어

http://stackoverflow.com/questions/4721133/how-to-startdrag-any-of-the-objects-in-the-stage

http://stackoverflow.com/questions/1395016/add-movieclips-and-controlling-them-in-a-datagrid-in-as3

xml

http://activeden.net/item/as3-xml-datagrid/53171

http://www.flepstudio.org/forum/tutorials/496-how-populate-datagrid-xml-file.html

http://active.tutsplus.com/tutorials/xml/quick-tip-using-the-datagrid-with-xml/

MultiLineCellRenderer.zip

0.15MB

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

저작자표시

'ADOBE > ActionScript' 카테고리의 다른 글

[Flex,AIR,ActionScript 3.0]Matrix를 이용해 이동,스케일링,회전,거울효과 적용 (0)	2020.09.20
플래시 AS3.0 Textfield에 Tag를 사용하여 Embed자원 이미지를 지정하기 (0)	2020.09.19
플래시 UI 컨트롤 리스트 fl.controls.List \| fl.controls.TileList 패키지 관련 (0)	2020.09.19
플래시 액션스크립트 플래시 이벤트로 페이지 이동 관련 (0)	2020.09.19
플래시 액션스크립트 프레임(fps) 관련 프레임 레이트 프레임 체크 (0)	2020.09.19

현재글[AS] 플래시 fl.controls.DataGrid 관련