Fex- Datagrid-自定義標題

Question

我想在flex中的datagrid的標題上放置文本輸入框，其值根據該特定列中存在的數據或值的數量動態變化。 請任何人幫助我，我張貼圖像acctually我想要的。 在此先感謝。

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來更新計數器組件。

那麼，那些聽衆是什麼？有兩種情況你可能想要預見。

• 數據提供者中的項目數量發生變化：這就是爲什麼我們要爲CollectionChange事件監聽數據提供者。
• 整個數據提供程序變更或廢止：這個我們聽在DataGrid上對PropertyChangeEvents和更新計數器只有當「數據提供程序」屬性更改