6 Replies Latest reply on Jun 25, 2009 10:21 AM by Flex harUI

    Display problem with multiple itemRenderer using ClassFactory

    K-kOo Level 1

      Hello,

       

      I'm fetching 3 different type of data from my DB and i'm displaying them in a vertical TileList.

      Those 3 different types must be displayed in different ways. So before setting the new dataProvider, i'm also changing the itemRenderer factory of the list. Unfortunately one of them does'nt have the same height than the other. The result is that the height of rows is messed up, sometimes they are as high as the maximum of them or as low as the minimum.

       

      Is it  good idea to switch like that between mulitple renderer ? I though it was a clean way to do it, instead of using a ViewStack in a single renderer.

      Here is the cleared code :

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
           width="440" height="300">
           <mx:Script>
                <![CDATA[
                   import mx.collections.ArrayCollection;
                   import mx.rpc.events.ResultEvent;
      
                   [Bindable]
                   protected var results:ArrayCollection = new ArrayCollection();
                    
                   private const searchTypeInfo:Array =
                   [
                        {type:"Marque", renderer:BrandRenderer},
                        {type:"Produit", renderer:ProductRenderer},
                        {type:"Match", renderer:MatchRenderer}
                   ];
                    
                   private function findAllItem(type:String):void
                   {
                        // setting currentSearchTypeInfo accordingly to "type"
                        // calling remoteObject ...
                   }
                    
                   private function onFindItem(e:ResultEvent):void
                   {
                        // handler for the remote object
                        resList.itemRenderer = new ClassFactory(currentSearchTypeInfo.renderer);
                        results.source = ArrayCollection(e.result).source;
                   }
                ]]>
           </mx:Script>
          
           <mx:Component className="BrandRenderer">
                <mx:Canvas>
                     <mx:Label text="{data.name}"/>
                </mx:Canvas>
           </mx:Component>
          
           <mx:Component className="ProductRenderer">
                <mx:Canvas>
                     <mx:Label text="{data.name + ': ' + data.price}"/>
                </mx:Canvas>
           </mx:Component>
          
           <mx:Component className="MatchRenderer">
                <mx:VBox verticalGap="0" verticalAlign="middle" horizontalAlign="center">
                     <mx:Label text="{name1}"/>
                     <mx:Label text=" Vs "/>
                     <mx:Label text="{name2}"/>
                </mx:VBox>
           </mx:Component>
          
           <mx:ComboBox id="typeCombo" dataProvider="{searchTypeInfo}" width="110" labelField="type">
                <mx:change>
                     <![CDATA[
                          findAllItem(typeCombo.selectedLabel);
                     ]]>
                </mx:change>
           </mx:ComboBox>
           <mx:TileList id="resList" direction="vertical" variableRowHeight="true"
                dataProvider="{results}" width="100%" height="100%" columnCount="2" maxColumns="2"/>
      </mx:Panel>
      

       

      Thank you for your help