Fex- Datagrid-カスタムヘッダー

Question

フレックスのデータグリッドのヘッダーにtextinputボックスを配置します。その値は、そのperticularカラムに存在するデータまたは値の数に応じて動的に変更されます。 助けてください、私が助けてくれる画像を投稿しています。 ありがとうございます。

Answer 1

Spark DataGridを使用することができます。その場合、カスタムのheaderRendererを作成するだけです。簡単にするため、デフォルトのheaderRendererから始めます。 Flex SDKのソースでは、クラスspark.skins.spark.DefaultGridHeaderRendererを探してください。このファイルをプロジェクトにコピーし、適切に名前を変更します。

このクラスの内部では、コンポーネントlabelDisplayGroupとsortIndicatorGroup（下部にあります）が見つかります。彼らはHGroupの中にいるので、単純に間にカウンタコンポーネントを追加することができます。

<!-- I removed the original comments for brevity --> 
<s:HGroup left="7" right="7" top="5" bottom="5" gap="2" verticalAlign="middle"> 
    <s:Group id="labelDisplayGroup" width="100%" /> 
    <!-- our counter component --> 
    <s:Label id="numRowsDisplay" /> 
    <s:Group id="sortIndicatorGroup" includeInLayout="false" /> 
</s:HGroup> 

これまでのビジュアルコンポーネントでは、今度はtextプロパティを適切に更新する必要があります。スクリプトブロックに次のスニペットを追加します。

private var dp:IList; 

override public function set owner(value:DisplayObjectContainer):void { 
    if (dp) dp.removeEventListener(CollectionEvent.COLLECTION_CHANGE, updateNumRows); 
    if (super.owner) super.owner.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChange); 

    super.owner = value; 
    dp = value ? DataGrid(value).dataProvider : null; 
    updateNumRows(); 

    if (dp) dp.addEventListener(CollectionEvent.COLLECTION_CHANGE, updateNumRows); 
    if (value) value.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChange); 
} 

private function onPropertyChange(event:PropertyChangeEvent):void { 
    if (event.property == 'dataProvider') { 
     dp = event.newValue as IList; 
     updateNumRows(); 
    } 
} 

private function updateNumRows(event:CollectionEvent=null):void { 
    numRowsDisplay.text = (dp ? dp.length : 0) + ""; 
} 

ここではどうなりますか？レンダラーのownerプロパティは、このレンダラーを保持するデータコンポーネントを参照します。この場合はDataGridです。オーナーがレンダラーに割り当てられると、dataProviderにアクセスし、そのlengthを使用してカウンタコンポーネントを更新します。

だから、そのリスナーは何ですか？あなたが予見したいかもしれない2つのケースがあります。

• データプロバイダのアイテムの数が変更されたため、データプロバイダでCollectionChangeイベントをリッスンしています。
• 全体のdataProviderを変更または無効にされています。このために、私たちは、DataGrid上のPropertyChangeEventsをリッスンし、カウンタを更新するのdataProvider 'プロパティは