Custom component containing filterFunction problem when using multiple instances

Question

I have a main app that is using two instances of a custom MXML DropDownList component.

I included all the logic and queries within the custom component to query MySQL and fill an ArrayCollection with the result.

In my first DropDownList, I want to show all the available currencies avilable in my database.

In the second DropDownList, I only want to show the CAD and USD currencies using a filterFunction.

I don't know why, but once the filterFunction is applied to the first element, the second act like they are sharing the same currenciesList variable (THIS IS MY PROBLEM).

[Bindable] for currenciesList is required to bind to my aSyncListView.

public for currenciesList is required in order to be used in the main app.

And no matter if my variable is public or private, I have the same bug... Please view the output at the end of this message.

The call in my main app look like :

<mx:Form>
  <formElems:DropDownListCurrencies id="product_cost_price_curr"
    currencyCadUsdOnly="true"/>
  <formElems:DropDownListCurrencies id="product_price_curr"/>
</mx:Form>

Now my custom component :

<fx:Script>
    <![CDATA[
        import classes.SharedFunctions;

        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.rpc.events.ResultEvent;

        [Bindable]
        public var currenciesList:ArrayCollection;

        public var currencyCadUsdOnly:Boolean = false;

        protected function dropdownlist1_creationCompleteHandler(event:FlexEvent):void
        {
            getAllCurrenciesResult.token = currenciesService.getAllCurrencies();

            // DEBUG just to show the id of the component
            trace('id:' + this.id + ' (getAllCurrencies)');
        }

        protected function getAllCurrenciesResult_resultHandler(event:ResultEvent):void
        {
            currenciesList = getAllCurrenciesResult.lastResult;

            // DEBUG before filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (BEFORE filterFunction)');

            if (currencyCadUsdOnly == true) {
                currenciesList.filterFunction = filterCadUsdOnly;
                currenciesList.refresh();
            }

            // DEBUG after filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (AFTER filterFunction)');
        }

        protected function filterCadUsdOnly(obj:Object):Boolean
        {
            return (obj.code == 'CAD' || obj.code == 'USD');
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <s:CallResponder id="getAllCurrenciesResult" result="getAllCurrenciesResult_resultHandler(event)"/>
    <currenciesservice:CurrenciesService id="currenciesService" fault="SharedFunctions.showError(event.fault.faultString, event.fault.faultDetail)" showBusyCursor="true"/>
</fx:Declarations>

<s:AsyncListView list="{currenciesList}"/>

Finally let's have a look at the console output. I'm expecting the ArrayList to have a length of 7 on creation of the second component... :

id:product_prices_curr (getAllCurrencies)
id:product_cost_price_curr (getAllCurrencies)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:7 (BEFORE filterFunction)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:2 (AFTER filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (BEFORE filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (AFTER filterFunction)

THANKS FOR THE HELP!

Sophistifunk · Accepted Answer · 2011-04-06 01:08:41Z

1

Whenever you need to have the same list in multiple places with differing filters, what you need is a ListCollectionView. That way you can apply a filter to it and you won't affect the original list. It's as easy as:

var secondList:ListCollectionView = new ListCollectionView(originalList);

And your secondList can have any filter you like without affecting the original list, with the added benefit of updating when items are added or removed from the originalList.

See here: mx.collections.ListCollectionView

answered Apr 6, 2011 at 1:08

Sophistifunk

5,1424 gold badges33 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jivago Over a year ago

a big thanks for that. I makes thing so much simplier to declare that private ListViewCollection in my component. Works like a charm!

Constantiner · Accepted Answer · 2011-04-05 23:34:04Z

0

Try to change your code to be the following:

        if (currencyCadUsdOnly == true) {
            currenciesList = new ArrayCollection(currenciesList.source);
            currenciesList.filterFunction = filterCadUsdOnly;
            currenciesList.refresh();
        }

Hope this helps!

answered Apr 5, 2011 at 23:34

Constantiner

14.2k4 gold badges29 silver badges34 bronze badges

Collectives™ on Stack Overflow

Custom component containing filterFunction problem when using multiple instances

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related