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和更新计数器只有当“数据提供程序”属性更改