Fex- Datagrid-自定义标题

Question

我想在flex中的数据网格的标题上放置一个textinput框，其值根据该特定列中存在的数据或值的值动态变化。 请任何人帮助我，实际发布我想要的图像。 在此先感谢。

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事件的原因。
• 整个dataProvider被更改或无效：为此，我们在DataGrid上侦听PropertyChangeEvents并仅在'dataProvider'属性更改时更新计数器