从Spark DataGrid headerRenderer textInput访问值

Question

请参见下图。

我正在使用一个Spark DataGrid来显示名称和年龄，使用DatapPovider从数据库中获取数据，并在DataGrid中显示它，我还使用headerRenderer在Age列的标题中添加了两个过滤器，我想重新获取数据库中的值，使用这些过滤器并重新呈现此DataGrid。

我的主文件有一个代码

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();
    ]]>
</fx:Script>

<s:DataGrid  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>

我的headerRender文件包含以下代码

<s:HGroup>
    <s:TextInput id="fromAge" text="" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" />
</s:HGroup>

我想在用户更改heder过滤器的值时重新呈现DataGrid，但不知道如何在主mxml文件中访问这两个过滤器的值。

这样做的最佳方式是什么？

Answer 1

我建议从headerRenderer调度包含值的事件。我要在浏览器中编写未经测试的代码;但希望这会给你一个要点。

首先，创建一个新的事件类：

public package something.something{
public class AgeFilterEvent extends Event{

 public var fromAge :String;
 public var toAge :String;
 public static var AGE_FILTER_REQUEST = "ageFilterRequest";

 public function AgeFilterEvent(type:String):void{
 // be sure that bubbles is set to true when you call the super argument
   super(type);
 }
}
}

更改你的headerrenderer以发送事件：

<s:HGroup>
  <fx:script>
    <[[
    protected function onChange():void{
       var event : AgeFilterEvent = new AgeFilterEvent(AgeFilterEvent.AGE_FILTER_REQUEST);
       event.fromAGe = fromAge.text; 
       event.toAge = toAge.text;
       dispatchEVent(event);
    }
  ]]>
  </fx:Script>
    <s:TextInput id="fromAge" text="" change="onChange()" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" change="onChange()"/>
</s:HGroup>

收听DatGrid上的事件。您将无法在MXML中执行此操作，因为DataGrid上不存在相应的元数据;所以创建一个ACtionScript监听器：

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();

        // in your main tag of this component. add an initialize or creationComplete listener to fire off this method handler
        public var onInitialize():void{
               grid.addEventListener(AgeFilterEvent.AGE_FILTER_REQUEST, onFilter);
        }

        public function onFilter():void{
            // code here to filter the dataProvider
       }
    ]]>
</fx:Script>

<!-- added an id to the DataGrid so it could be accessed in ACtionScript -->
<s:DataGrid id="grid"  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>