Flex - ArrayCollection - ajout et suppression d'une fonction filtre

Question

J'utilise Adobe Flash Builder 4 Premium.j'ai un mx:DataGrid et un s:TextInput, et j'essaie de configurer un champ de recherche qui filtre le DataGrid à chaque pression sur une touche.

Cette page montre un exemple presque parfait de ce que j'essaie de faire, sauf que je configure cela dans un s:TitleWindow, qui s'affiche sous forme de fenêtre contextuelle à l'aide du PopUpManager.La liste que j'essaie de filtrer peut être très longue.Il s'agit d'une liste de noms d'utilisateurs, extraits d'une base de données MySQL via PHP.Comme elle peut être si grande, je souhaite que la liste soit remplie une fois dans l'application principale, puis référencée dans la fenêtre contextuelle afin qu'elle n'ait pas besoin de récupérer tous les noms d'utilisateur à chaque fois que l'utilisateur ouvre la fenêtre contextuelle.

Tout cela fonctionne bien la première fois que vous ouvrez la fenêtre contextuelle, mais si vous la fermez et la relancez, j'obtiens cette erreur d'exécution :

J'obtiens également cette erreur si j'essaie de définir le filterFunction revenir à null juste avant de fermer la fenêtre contextuelle.

Voir l'exemple de code ci-dessous :

Application principale :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.collections.*;
            import mx.managers.PopUpManager;

            [Bindable] public var allMembersList:ArrayCollection;

            private function openPopup():void
            {
                var popupInstance:popup = PopUpManager.createPopUp(this as DisplayObject, popup, true) as popup;
                PopUpManager.centerPopUp(popupInstance);
            }
        ]]>
    </fx:Script>
    <s:Button label="Open Popup" click="openPopup()"/>
</s:Application>

Surgir:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:model="services.model.*"
               tabChildren="false"
               close="close()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.FlexGlobals;
            import mx.managers.PopUpManager;

            private function getUsers(startsWith:String = ""):void
            {
                if (FlexGlobals.topLevelApplication.allMembersList == null)
                {
                    FlexGlobals.topLevelApplication.allMembersList = new ArrayCollection();
                    getUsersResult.token = php.getUsers();
                }

                FlexGlobals.topLevelApplication.allMembersList.filterFunction = function(item:Object):Boolean
                {
                    return item.username.match(new RegExp("^"+ startsWith, "i"));
                };
                FlexGlobals.topLevelApplication.allMembersList.refresh();
                grdMemberList.dataProvider = FlexGlobals.topLevelApplication.allMembersList;
            }

            private function getUsersResultHandler():void
            {
                var users:Object = getUsersResult.lastResult;
                for each (var user:Object in users)
                    FlexGlobals.topLevelApplication.allMembersList.addItem({"username":user.username});
            }

            private function close():void
            {
                FlexGlobals.topLevelApplication.allMembersList.filterFunction = null;
                FlexGlobals.topLevelApplication.allMembersList.refresh();
                PopUpManager.removePopUp(this);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <model:MODEL id="php" fault="{Alert.show('There was a PHP error!\nPlease note the steps taken to produce this error and call support.\n\nError Message: '+ event.fault.faultDetail, 'Error');}" showBusyCursor="false"/>
        <s:CallResponder id="getUsersResult" result="getUsersResultHandler()"/>
    </fx:Declarations>

    <mx:DataGrid id="grdMemberList" creationComplete="getUsers()">
        <mx:columns>
            <mx:DataGridColumn headerText="Member List" dataField="username"/>
        </mx:columns>
    </mx:DataGrid>
    <s:TextInput id="txtUsername" keyUp="{ if (event.charCode != 13 && event.charCode != 0) getUsers(txtUsername.text); }"/>
</s:TitleWindow>

L'application semble toujours fonctionner comme prévu, malgré l'erreur, mais je ne suis pas fan des erreurs dans mon application, j'aimerais donc vraiment comprendre la cause de ce problème.

Merci!

Answer 1

Il s'avère que le problème venait du tabChildren propriété.La documentation indique de ne pas utiliser cette propriété dans Flex, mais d'utiliser hasFocusableChildren plutôt.Je ne sais pas pourquoi ce problème ne s'est manifesté qu'une fois que j'essayais de définir le filterFunction.

La raison pour laquelle je mettais tabChildren sur false était pour que la fonctionnalité par défaut de la touche TAB (changement de focus) n'ait pas lieu, afin que je puisse contrôler ce comportement moi-même.Le hasFocusableChildren la propriété ne fonctionne pas (ou du moins, la définir sur false n'empêche pas la touche TAB de changer de focus), je devrai donc peut-être essayer un autre moyen de capturer l'événement de la touche TAB et de l'arrêter.

---

MODIFIER:

Pour ceux que ça intéresse (même si ça n'a rien à voir avec le post original), la solution a été de changer :

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:model="services.model.*"
               width="1000"
               height="550"
               tabChildren="false"
               close="close()">

à:

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:model="services.model.*"
               width="1000"
               height="550"
               keyFocusChange="{ event.preventDefault(); }"
               close="close()">

Answer 2

Je n'essaie jamais de tester votre code (car il a également besoin d'un côté serveur) mais je pense que vous ne devriez pas redéfinir filterFunction sur null.Alternativement, vous pouvez le définir sur une fonction qui renvoie toujours vrai.

function defaultFilterFunc( item: Object ): Boolean { return true; }