尝试包含“ * .as”而不是<fx:script>

Question

I have an accordion component nested inside of a tab navigator. Each accordion pane has a form inside of it. The forms have two grids that transfer data back and forth between eachother and a few buttons to help them. I have the actionscript that controls the form. *Thanks to The_asMan for helping me figure this part out.

In the package "forms", FormFunctions.as:

import mx.collections.ArrayCollection;

[Bindable]
public var originalData:ArrayCollection;

[Bindable]
public var changingData:ArrayCollection;

public function init( ):void
{
    this.changingData = new ArrayCollection( );
    this.originalData = new ArrayCollection( );
    for( var i:int = 0;i<100;i++)
    {
        var obj:Object = new Object( );
        obj.label = 'slot '+ i;
        obj.value = 's'+i;
        originalData.addItem( obj );
    }
}

public function addItem():void
{
    this.changingData.addItem(myStaticDataGrid.selectedItem );
    this.originalData.removeItemAt(myStaticDataGrid.selectedIndex);
}

public function clearList():void
{
    this.changingData.removeAll();
    init();
}
public function removeItem():void
{
    this.changingData.removeItemAt(bdgFormData.selectedIndex);
    this.originalData.addItem(bdgFormData.selectedItem );
}

My tab nav/accordian looks like this:

<mx:TabNavigator id="myTabNav">
    <s:NavigatorContent id="myFirstTab">
        <mx:Accordion id="myFirstAccordNav">
            <s:NavigatorContent id="myFirstAccordPane">
                <forms:DualGridStyle id="myFirstForm"/>
            </s:NavigatorContent>
            <s:NavigatorContent id="mySecondAccordPane">
                <forms:DualGridStyle id="mySecondForm"/>
            </s:NavigatorContent>
         </mx:Accordion>
      </s:NavigatorContent>
      <s:NavigatorContent id="mySecondTab">
         <mx:Accordion id="mySecondAccordNav">
            <s:NavigatorContent id="myThirdAccordPane">
                <forms:DualGridStyle id="myThirdForm"/>
            </s:NavigatorContent>
            <s:NavigatorContent id="myFourthAccordPane">
                <forms:DualGridStyle id="myFouthForm"/>
            </s:NavigatorContent>
         </mx:Accordion>
      </s:NavigatorContent>
</mx:TabNavigator>

The tag is my custom form component. Here is the code:

<s:Form xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="400">
<s:layout>
    <s:BasicLayout/>
</s:layout>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="lblFilter" x="40" y="24" text="Filter:"/>
<s:TextInput id="txtFilter" x="83" y="20" width="145"/>

<s:DataGrid id="myStaticDataGrid" left="40" top="60" width="188" 
            creationComplete="init()" dataProvider="{originalData}"/>
<s:DataGrid id="bdgFormData" top="60" width="284" dataProvider="{changingData}"
            horizontalCenter="110"/>
<s:Button id="btnAdd" label="Add" top="90" left="262" 
          click="addItem()"/>
<s:Button id="btnRemove" label="Remove" top="90" horizontalCenter="310" 
          click="removeItem()" />
<s:Button id="btnClear" label="Clear" top="120" horizontalCenter="310" 
          click="clearList()"/>

</s:Form>

My question is probably a simple answer. How do I get the custom form to recognize the AS functions from FormFunctions.as?

Answer 1

Set your click event as:

click="addItem(event)"

and the addItem function as:

private function addItem(e:MouseEvent):void
{