2011-06-04 3 views
0

J'ai le code de suivi - comme TreeItemRendererdéfilement arbre Flex va bogué après avoir ajouté TreeItemRenderer personnalisé

<?xml version="1.0" encoding="utf-8"?> 
<mx:TreeItemRenderer 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:solar="*"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.containers.Canvas; 
      import mx.containers.VBox; 
      import mx.controls.Alert; 
      import mx.controls.Button; 
      import mx.controls.CheckBox; 
      import mx.controls.Tree; 
      import mx.controls.listClasses.BaseListData; 
      import mx.controls.treeClasses.TreeListData; 
      import mx.core.mx_internal; 
      use namespace mx_internal; 

      protected var buttonBox : VBox; 

      override protected function createChildren() : void 
      { 
       super.createChildren(); 
       setStyle("verticalAlign", "top"); 

       this.addEventListener(MouseEvent.CLICK, mouseHandler); 
      } 

      protected function mouseHandler(event : MouseEvent) : void 
      { 

       if([email protected] == "true") 
        [email protected] = "false" 
       else 
        [email protected] = "true"; 

       showButtons(); 
      } 

      private function showButtons() : void 
      { 
       if( true) 
       { 
        if(buttonBox == null) 
        { 
         buttonBox = new VBox(); 
         buttonBox.setStyle("verticalGap", 0); 
         addChild(buttonBox); 

         var b1 : Button  = new Button(); 
         b1.percentWidth = 100; 
         b1.label  = "block"; 
         buttonBox.addChild(b1); 

         var b2 : Button  = new Button(); 
         b2.percentWidth = 100; 
         b2.label  = "block1"; 
         buttonBox.addChild(b2); 

         var b3 : Button  = new Button(); 
         b3.percentWidth = 100; 
         b3.label  = "block"; 
         buttonBox.addChild(b3); 
        } 
       } 
       else 
        if(buttonBox != null) 
        { 
         removeChild(buttonBox); 
         buttonBox = null; 
        } 
       invalidateSize(); 
       invalidateDisplayList(); 
      } 

      override public function set listData(value : BaseListData) : void 
      { 
       super.listData = value; 

       if(listData) 
       { 
        showButtons(); 
       } 
      } 

      override protected function measure() : void 
      { 
       super.measure(); 

       if(buttonBox != null) 
       { 

        //buttonBox.visible = buttonBox.includeInLayout =(!isOpening && isOpen) ; 
        var b : Boolean = false; 

        if([email protected] != null) 
         b = [email protected] == "true"; 

        buttonBox.visible = buttonBox.includeInLayout = b; 

        if(buttonBox.visible) 
        { 
         buttonBox.y  = measuredHeight; 
         measuredHeight += buttonBox.measuredHeight; 
        } 
       } 
      } 

      override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void 
      { 
       super.updateDisplayList(unscaledWidth, unscaledHeight); 

       if(buttonBox != null) 
       { 
        buttonBox.x = 40; 
        buttonBox.setActualSize(unscaledWidth - buttonBox.x, unscaledHeight); 
       } 
      } 

     ]]> 
    </fx:Script> 
</mx:TreeItemRenderer> 

Le code d'application est la suivante:

<?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" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <mx:Tree x="289" y="0" width="377" height="599" labelField="@label" itemRenderer="iRR" variableRowHeight="true"> 
    <mx:dataProvider> 
     <fx:XMLList xmlns=""> 
      <folder state="unchecked" label="Marketing Collateral" isBranch="true" > 
       <folder state="unchecked" isBranch="true" label="Media, PR, and Communications" > 
        <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> 
        <folder state="unchecked" isBranch="false" label="Articles Reprints" /> 
        <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> 
        <folder state="unchecked" isBranch="false" label="Press Kits" /> 
        <folder state="unchecked" isBranch="false" label="Press Releases" /> 
        <folder state="unchecked" isBranch="false" label="Quick Hits" /> 
        <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> 
        <folder state="unchecked" isBranch="false" label="Special Updates" /> 
        <folder state="unchecked" isBranch="false" label="White Papers" /> 
        <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> 
        <folder state="unchecked" isBranch="false" label="Articles Reprints" /> 
        <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> 
        <folder state="unchecked" isBranch="false" label="Press Kits" /> 
        <folder state="unchecked" isBranch="false" label="Press Releases" /> 
        <folder state="unchecked" isBranch="false" label="Quick Hits" /> 
        <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> 
        <folder state="unchecked" isBranch="false" label="Special Updates" /> 
        <folder state="unchecked" isBranch="false" label="White Papers" /> 
        <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> 
        <folder state="unchecked" isBranch="false" label="Articles Reprints" /> 
        <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> 
        <folder state="unchecked" isBranch="false" label="Press Kits" /> 
        <folder state="unchecked" isBranch="false" label="Press Releases" /> 
        <folder state="unchecked" isBranch="false" label="Quick Hits" /> 
        <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> 
        <folder state="unchecked" isBranch="false" label="Special Updates" /> 
        <folder state="unchecked" isBranch="false" label="White Papers" /> 
        <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> 
        <folder state="unchecked" isBranch="false" label="Articles Reprints" /> 
        <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> 
        <folder state="unchecked" isBranch="false" label="Press Kits" /> 
        <folder state="unchecked" isBranch="false" label="Press Releases" /> 
        <folder state="unchecked" isBranch="false" label="Quick Hits" /> 
        <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> 
        <folder state="unchecked" isBranch="false" label="Special Updates" /> 
        <folder state="unchecked" isBranch="false" label="White Papers" /> 
       </folder> 
       <folder state="unchecked" isBranch="true" label="Forms and Applications" > 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
       </folder> 
       <folder state="unchecked" isBranch="true" label="Forms and Applications" > 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
       </folder> 
       <folder state="unchecked" isBranch="true" label="Forms and Applications" > 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
        <folder state="unchecked" isBranch="false" label="Applications" /> 
        <folder state="unchecked" isBranch="false" label="Forms" /> 
       </folder> 
      </folder> 
     </fx:XMLList> 
    </mx:dataProvider> 
    </mx:Tree> 
</s:Application> 
  • Le code fonctionne essentiellement pour un peu mais après quelques éléments ont été ouverts - il échoue, et le défilement devient buggy. S'il vous plaît aider.

Répondre

3

Essayez Spark Tree, il est basé sur Spark List et est exempt de tous les bogues de l'arbre MX.

+0

Salut Maxim. Tout d'abord - merci! :) Il est absolument un composant tueur, et une excellente solution sur l'arbre Adobe super bugy. De toute façon - je suis incapable de trouver plus de démos et d'exemples d'utilisation et d'étendre votre arbre et son Renderer. S'il vous plaît si vous avez des liens - ce serait plus qu'une aide. –

+0

Il n'y a aucun exemple montrant au moins comment l'utiliser comme arbre XML. –

+0

On dirait que l'arborescence a des problèmes avec différents éléments de hauteur. –

2
<?xml version="1.0" encoding="utf-8"?> 
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"> 
    <s:states> 
     <s:State name="normal" />    
     <s:State name="hovered" /> 
     <s:State name="selected" /> 
    </s:states> 
    <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle"> 
     <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0"> 
      <s:fill> 
       <s:SolidColor color="0xFFFFFF" /> 
      </s:fill> 
     </s:Rect> 
     <s:Group id="disclosureGroup"> 
      <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" /> 
     </s:Group> 
     <s:BitmapImage source="{treeListData.icon}" /> 
     <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/> 
    </s:HGroup> 
</s:MXTreeItemRenderer> 
+0

lol ... je viens de donner une bonne réponse. c'est vraiment quelque chose de nouveau. Je vais vérifier maintenant. Je vous remercie. +1 –

+0

Merci encore une fois, et bienvenue :) –

+0

après un jour sur s: MXTreeItemRenderer je reproduis le même genre d'erreur. –

2

Je pense que votre problème a trait aux principes de base du fonctionnement de ItemRenderers.

Vous devez noter que ItemRenderers est recyclé, de sorte que lorsque vous faites défiler la liste, aucun ItemRenderers n'est créé. Afin de promouvoir ce comportement, vos ItemRenderers doivent être strictement liés par leurs données et toutes les modifications individuelles doivent être tout aussi réversibles. Par exemple, si votre ItemRenderer change son arrière-plan en rouge si un certain champ a une valeur numérique négative, vous devez vous rappeler que le même ItemRenderer représentera probablement une valeur positive à un moment donné.

Ou pour être plus précis; avoir une instruction if qui vérifie une valeur négative et change l'arrière-plan en rouge n'est pas suffisante à moins qu'elle ne soit suivie d'une instruction else qui change l'arrière-plan à sa couleur par défaut.

Maintenant, je n'ai pas étudié votre code à fond mais à en juger par le comportement que vous décrivez, ce serait mon meilleur pari. J'espère que cela vous aidera ou quelqu'un d'autre.

Questions connexes