Flex-advanceddatagrid-control
Flex-AdvancedDataGridコントロール
前書き
AdvancedDataGridコントロールは、標準のDataGridコントロールに複数の機能を追加して、Flexアプリケーションにデータ視覚化機能を追加しました。 これらの機能により、データの表示、データの集約、およびデータのフォーマットをより詳細に制御できます。
クラス宣言
以下は mx.controls.AdvancedDataGrid クラスの宣言です-
public class AdvancedDataGrid
extends AdvancedDataGridBaseExパブリックプロパティ
| Sr.No | Property & Description |
|---|---|
| 1 |
displayDisclosureIcon : Boolean ナビゲーションツリーの開示アイコンの作成と表示を制御します。 |
| 2 |
displayItemsExpanded : Boolean trueの場合、ナビゲーションツリーを展開してすべてのアイテムを表示します。 |
| 3 |
firstVisibleItem : Object AdvancedDataGridコントロールの一番上の行に現在表示されているアイテムに対応するデータプロバイダー要素。 |
| 4 |
groupedColumns : Array 列のグループ化を実行するときのAdvancedDataGridColumnインスタンスの階層を定義する配列。 |
| 5 |
groupIconFunction : Function 各グループアイテムで実行して、ナビゲーションツリーのブランチアイコンを決定するためのユーザー提供のコールバック関数。 |
| 6 |
groupItemRenderer : IFactory グループに対応するナビゲーションツリーのブランチノードを表示するために使用されるアイテムレンダラーを指定します。 |
| 7 |
groupLabelFunction : Function ナビゲーションツリー内のラベルを決定するために各アイテムで実行するコールバック関数。 |
| 8 |
groupRowHeight : Number グループ化された行の高さ（ピクセル単位）。 |
| 9 |
hierarchicalCollectionView : IHierarchicalCollectionView コントロールによって使用されるIHierarchicalCollectionViewインスタンス。 |
| 10 |
itemIcons : Object アイテムのアイコンを指定するオブジェクト。 |
| 11 |
lockedColumnCount : int [override] The index of the first column in the control that scrolls. |
| 12 |
lockedRowCount : int [override] The index of the first row in the control that scrolls. |
| 13 |
rendererProviders : Array AdvancedDataGridRendererProviderインスタンスの配列。 |
| 14 |
selectedCells : Array 行と列のインデックスとしてセル位置の配列が含まれます。 |
| 15 |
treeColumn : AdvancedDataGridColumn ツリーが表示される列。 |
保護されたプロパティ
| Sr.No | Property & Description |
|---|---|
| 1 |
anchorColumnIndex : int = -1 現在のアンカーの列インデックス。 |
| 2 |
caretColumnIndex : int = -1 キャレットの下にあるアイテムの列名。 |
| 3 |
cellSelectionTweens : Object 選択トゥイーンのハッシュテーブル。 |
| 4 |
highlightColumnIndex : int = -1 現在カーソルの上または下にあるアイテムの列インデックス。 |
| 5 |
selectedColumnIndex : int = -1 選択したセルの列。 |
| 6 |
treeColumnIndex : int [read-only] The tree column number. |
| 7 |
tween : Object 行をアニメーション化するトゥイーンオブジェクトユーザーは、このオブジェクトにイベントリスナーを追加して、トゥイーンの開始、更新、終了時に通知を受け取ることができます。 |
| 8 |
visibleCellRenderers : Object 現在表示されているデータプロバイダーアイテムレンダラーのハッシュテーブル。 |
パブリックメソッド
| Sr.No | Method & Description |
|---|---|
| 1 |
AdvancedDataGrid() コンストラクタ。 |
| 2 |
collapseAll():void ナビゲーションツリーのすべてのノードを折りたたみます。 |
| 3 |
expandAll():void コントロールのナビゲーションツリーのすべてのノードを展開します。 |
| 4 |
expandChildrenOf(item:Object, open:Boolean):void 指定されたアイテムの下にあるナビゲーションツリーのすべてのノードを開閉します。 |
| 5 |
expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void ナビゲーションツリーのブランチノードを開閉します。 |
| 6 |
getParentItem(item:Object):* 子アイテムの親を返します。 |
| 7 |
isItemOpen(item:Object):Boolean 指定されたブランチノードが開いている場合、trueを返します。 |
| 8 |
setItemIcon(item:Object, iconID:Class, iconID2:Class):void アイテムのナビゲーションツリーに関連付けられたアイコンを設定します。 |
保護されたメソッド
| Sr.No | Method & Description |
|---|---|
| 1 |
addCellSelectionData (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void マウスを使用してセルを選択したかのように、セル選択情報をコントロールに追加します。 |
| 2 |
applyCellSelectionEffect (indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void 選択インジケータを適用するための効果を設定します。 |
| 3 |
applyUserStylesForItemRenderer (givenItemRenderer:IListItemRenderer):void AdvancedDataGridコントロールのスタイルをアイテムレンダラーに適用します。 |
| 4 |
atLeastOneProperty(o:Object):Boolean オブジェクトに少なくとも1つのプロパティがある場合、つまり辞書に少なくとも1つのキーがある場合、trueを返します。 |
| 5 |
clearCellSelectionData():void セルの選択に関する情報をクリアします。 |
| 6 |
clearIndicators():void [override] Removes all selection and highlight and caret indicators. |
| 7 |
clearSelectedCells(transition:Boolean = false):void selectedCellsプロパティをクリアします。 |
| 8 |
dragCompleteHandler(event:DragEvent):void [override] Handler for the DragEvent.DRAG_COMPLETE event. |
| 9 |
dragDropHandler(event:DragEvent):void [override] Handler for the DragEvent.DRAG_DROP event. |
| 10 |
drawVerticalLine (s:Sprite, colIndex:int, color:uint, x:Number):void [override] Draws a vertical line between columns. |
| 11 |
finishKeySelection():void [override] Sets selected items based on the caretIndex and anchorIndex properties. |
| 12 |
initListData (item:Object, adgListData:AdvancedDataGridListData):void AdvancedDataGridアイテムレンダラーによって使用されるAdvancedDataGridListDataオブジェクトを初期化します。 |
| 13 |
moveIndicators(uid:String, offset:int, absolute:Boolean):void [override] Moves the cell and row selection indicators up or down by the given offset as the control scrolls its display. |
| 14 |
removeCellSelectionData(uid:String, columnIndex:int):void コントロールからセル選択情報を削除します。 |
| 15 |
selectCellItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean 指定されたアイテムレンダラーがマウスでクリックされ、キーボード修飾子が指定された状態にあると仮定して、選択されたセルのリストを更新します。 |
| 16 |
selectItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean [override] Updates the set of selected items given that the item renderer provided was clicked by the mouse and the keyboard modifiers are in the given state. |
| 17 |
treeNavigationHandler(event:KeyboardEvent):Boolean ナビゲーションツリーのキーボードナビゲーションのハンドラー。 |
イベント
| Sr.No | Event & Description |
|---|---|
| 1 |
headerDragOutside ユーザーが列グループの外側に列をドラッグしたときに送出されます。 |
| 2 |
headerDropOutside ユーザーが列グループの外に列をドロップしたときに送出されます。 |
| 3 |
itemClose ナビゲーションツリーのブランチが閉じられるか折りたたまれたときに送出されます。 |
| 4 |
itemOpen ナビゲーションツリーのブランチが開かれたとき、または展開されたときに送出されます。 |
| 5 |
itemOpening ツリーブランチのオープンまたはクローズ操作が開始されたときに送出されます。 |
継承されるメソッド
このクラスは、次のクラスからメソッドを継承します-
- mx.controls.AdvancedDataGridBaseEx
- mx.controls.AdvancedDataGridBase
- mx.controls.listClasses.AdvancedDataGridBase
- mx.core.ScrollControlBase
- mx.core.UIComponent
- mx.core.FlexSprite
- flash.display.Sprite
- flash.display.DisplayObjectContainer
- flash.display.InteractiveObject
- flash.display.DisplayObject
- flash.events.EventDispatcher
- 対象
Flex AdvancedDataGridコントロールの例
テストアプリケーションを作成して、FlexアプリケーションでAdvancedDataGridコントロールの使用を確認するには、次の手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/HelloWorld.mxml の内容です。
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/finddevguides/client/Style.css"/>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var data:ArrayCollection = new ArrayCollection ([
{value:"France", code:"FR"},
{value:"Japan", code:"JP"},
{value:"India", code:"IN"},
{value:"Russia", code:"RS"},
{value:"United States", code:"US"}
]);
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Complex Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading"/>
<s:Panel id = "dataGridPanel" title = "Using DataGrid"
width = "500" height = "300">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center"/>
</s:layout>
<mx:AdvancedDataGrid dataProvider = "{data}" id = "advancedDataGrid" >
<mx:columns>
<mx:AdvancedDataGridColumn dataField = "code" width = "100"
headerText = "Code"/>
<mx:AdvancedDataGridColumn dataField = "value" width = "200"
headerText = "Value"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:HGroup width = "60%">
<s:Label text = "Code :"/>
<s:Label text = "{advancedDataGrid.selectedItem.code}"
fontWeight = "bold"/>
<s:Label text = "Value :"/>
<s:Label text = "{advancedDataGrid.selectedItem.value}"
fontWeight = "bold"/>
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/ComplexControlsApplicationl＃currentlyLoaded = AdvancedDataGrid [Try it online]]
