mx.controls
DataGrid クラス

DataGrid コントロールは複数のデータ列を表示できるリストです。

DataGrid コントロールは次の機能を提供します。

• 複数幅の列、または同一固定幅の列
• 実行時にユーザーがサイズ変更できる列
• オプションのカスタマイズ可能な列および行ヘッダ
• 任意の列にカスタムセルレンダラーを使用して、テキスト以外のデータを表示できる機能
• 複数の選択モード (行、列、セル、および編集)、および選択イベント
• データのページングのサポート
• ドラッグ & ドロップ操作のサポート。

MXML シンタックス

<mx:DataGrid> タグは、親クラスのすべてのプロパティと、次のプロパティを継承します。

 <mx:DataGrid
   cellEditor="No default."
   cellRenderer="No default."
   columns="No default."
   columnName="No default."
   dataProvider="No default."
   editable="false|true"
   focusedCell="No default."
   headerColors="[0xE6EEEE, 0xFFFFFF]"
   headerHeight="20"
   headerStyle="No default."
   hGridLineColor="#666666"
   hGridLines="false|true"
   resizableColumns="true|false"
   rollOverColor="#0xE3FFD6"
   selectable="true|false"
   selectionColor="#0xCDFFC1"
   showHeaders="true|false"
   sortableColumns="true|false"
   vGridLineColor="#666666"
   vGridLines="false|true"
   cellEdit="Event handler; no default."
   cellFocusIn="Event handler; no default."
   cellFocusOut="Event handler; no default."
   cellPress="Event handler; no default."
   columnStretch="Event handler; no default."
   headerRelease="Event handler; no default."
 >
 次に示すのは、列の順序を指定する DataGrid サンプルコードです。
 <mx:DataGrid>
   <mx:dataProvider>
     <mx:Array>
       <mx:Object Artist="Pavement" Price="11.99"
         Album="Slanted and Enchanted" />
       <mx:Object Artist="Pavement"
         Album="Brighten the Corners" Price="11.99" />
     </mx:Array>
   </mx:dataProvider>
   <mx:columns>
     <mx:Array>
       <mx:DataGridColumn columnName="Album" />
       <mx:DataGridColumn columnName="Price" />
     </mx:Array>
   </mx:columns>
 </mx:DataGrid>
 

関連項目
    gridclasses.DataGridColumn
    gridclasses.DataGridRow
    mx.effects.Tween
    mx.managers.CursorManager

addColumn

パラメータ
    newCol - 新規列または DataGridColumn のストリング名です。

戻り値
     新規列です。

addColumnAt

パラメータ
    index:Number - 新規列のインデックスです。
    newCol - 新規列または DataGridColumn のストリング名です。

戻り値
     新規列です。

draw

editField

パラメータ
    index:Number - 編集するアイテムのインデックスです。
    colName:String - 編集するフィールドの名前です。
    data - 編集フィールドに置かれる新しいデータです。

getColumnAt

パラメータ
    index:Number - 取得する列のインデックスです。

戻り値
     指定のインデックスにある列です。

getColumnIndex

パラメータ
    name:String - インデックスを取得する列の名前です。

戻り値
     列のインデックスです。

getRowMetrics

戻り値
     left、top、right、bottom の各プロパティを含むオブジェクトです。

layoutChildren

measure

placeSortArrow

removeAllColumns

removeColumnAt

パラメータ
    index:Number - 削除する列のインデックスです。

戻り値
     削除された列です。

cellEditor

columnCount

columnNames

columns

editable

focusedCell

header_mc

headerHeight

lines_mc

minColWidth

resizableColumns

selectable

showHeaders

sortableColumns

sortArrow

stretchBar

stretcher

version

<?xml version="1.0"?>
<!-- DataGrid コントロールの使用方法を示す簡単な例 1 -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

<mx:Panel title="DataGrid Panel" marginTop="10" height="100%" width="100%">

<mx:DataGrid editable="true" height="100%" width="100%">

<mx:dataProvider>
<mx:Array>

<mx:Object>
<Artist>Pavement</Artist>
<Price>9.99</Price>
<Album>Slanted and Enchanted</Album>
</mx:Object>

<mx:Object>
<Artist>Pavement</Artist>
<Price>9.99</Price>
<Album>Brighten The Corners</Album>
</mx:Object>

</mx:Array>
</mx:dataProvider>

</mx:DataGrid>

</mx:Panel>

</mx:Application>
        

<?xml version="1.0"?>
<!-- DataGrid コントロールの使用方法を示す簡単な例 2 -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

<mx:Script>
<![CDATA[
         
function cellPressEvt(event)
	  {
	       clean();
	       focusCol.text=focusCol.text +  '\n' + event.columnIndex;
	       focusItem.text=focusItem.text + '\n' + event.itemIndex;
	       focusType.text=focusType.text + '\n' + event.type;
	  }
	  
	  function clean()
	  {
	       focusCol.text="ColumnIndex";
	       focusItem.text="ItemIndex";
	       focusType.text="EventType";
	  }
	    
	    ]]>
</mx:Script>

<mx:Panel title="DataGrid Panel" marginTop="10">

<mx:VBox>

<mx:DataGrid id="myGrid" width="350" height="100" cellPress="cellPressEvt(event);">

<mx:dataProvider>
<mx:Array id="arr">
<mx:Object Artist=" Kapil" Album="All Time Favourites" Price="10"/>
<mx:Object Artist=" Kapil" Album="Classic Songs" Price="10"/>
</mx:Array>
</mx:dataProvider>

</mx:DataGrid>

</mx:VBox>

<mx:HBox>

<mx:TextArea id="focusCol" text="ColumnIndex"/>
<mx:TextArea id="focusItem" text="ItemIndex"/>
<mx:TextArea id="focusType" text="EventType"/>

</mx:HBox>

</mx:Panel>

</mx:Application>