Comment ajouter un bouton après le dernier élément d'une liste dans Flex?

Question

J'ai une HorizontalList dans Flex qui contient des données et un ItemRenderer représentant une page. Après le dernier élément (Page) dans la liste, je veux avoir un bouton - un Plus pour créer une nouvelle page.

À quelles données puis-je accéder pour obtenir la bonne position x, y du dernier ItemRenderer? Je reçois la position de

this.listContent.listItems[this.listContent.listItems.length-1]; 

qui me donne le bon ItemRenderer instanceBut, mais son x et y ont été utilisés pour la position d'index de la ItemRenderer dans la liste. Je veux quelque chose en pixels par rapport à la liste elle-même afin que je puisse positionner un bouton dans UpdateDisplayList(). Cela m'intéresse en utilisant les substitutions UIComponent au lieu de passer par ItemRenderer lui-même, car il ne semble pas que ce soit quelque chose qui devrait être dans le dataProvider ... il faudrait un "lastItem" bizarre objet que le ItemRenderer a cherché et semble juste étrange. De plus, c'est une fonction assez utile pour les listes en général.

Donc, des idées sur cette approche ou d'autres?

Answer 1

Il est difficile de récupérer le véritable itemRenderer pour le dernier objet car les itemsRenderer sont réutilisés, il est donc difficile de déterminer lequel sera toujours le dernier. La vérification d'une variable "lastItem" dans les données est probablement le moyen le plus simple de mettre en œuvre ceci.

Vous pouvez cependant utiliser la propriété outerDocument avec un itemRenderer en ligne. Cela vous donne accès à la liste.

<mx:List> 
    <mx:itemRenderer> 
     <mx:Component> 
      <ns1:MyRenderer addLastButton="{outerDocument.myList.dataProvider.index == 10}"/> 
     </mx:Component> 
    </mx:itemRenderer> 
... 
</mx:List> 

Answer 2

Il y a probablement une bonne façon de le faire en utilisant un itemEditor mais je voudrais essayer quelque chose comme ceci:

1. Ajouter un objet null supplémentaire à la liste chaque fois que les données actualisées.
2. Avoir un itemRenderer qui remplace les données définies comme indiqué here qui vérifie si l'objet est null et si c'est le cas, définissez un boolean bindable à true.
3. Ce booléen contrôle les propriétés de visibilité et includeInLayout d'un textInput, d'une étiquette et d'un bouton.
4. Avoir le bouton envoyer un événement lorsque vous cliquez sur ce qui ajoute le nouvel élément à la liste avec une certaine validation.

Answer 3

Je pense que vous pouvez essayer d'ajouter un élément à dataProvider (avec des données par exemple "bouton") et créer un itemRenderer personnalisé pour la liste qui changera son apparence en Button (peut être implémenté avec états) = "bouton"

Answer 4

Dans la liste - ajoutez un événement de créationComplet - et dans son implémentation - ajoutez un autre élément à la liste, disons avec une certaine chaîne qui le différera des éléments précédents. En vous article tag renderer ajouter cet attribut:

currentState="{data.sname == '%your string%' ? 'last' : 'normal'}" 

Et, bien sûr, ajouter les 2 états:

<s:states><br/> 
     <mx:State name="normal"/> 
     <mx:State name="last"/> 
    </s:states> 

Après cela, vous pouvez manipuler votre moteur de rendu, ajuster les étiquettes de texte selon les Etats, par exemple:

<s:Label text.normal="{%whatever%}" text.last="this is the last item"/> 

Espérons que ça aide!