5 Replies Latest reply on Sep 17, 2008 12:45 PM by Newsgroup_User

    Creating sprite in AdvanceDataGrid

    eexposito
      I have an array that I am using as a datagrid source:

      var dgSource:Array = new Array();
      dgSource.push({color:"#990000",label:"server1"});
      dgSource.push({color:"#FF0000",label:"server2"});
      dgSource.push({color:"#FF8429",label:"server3"});
      dgSource.push({color:"#FFCE9C",label:"server4"});

      I would like my datagrid to use the color field to dynamically create a sprite that is a circle filled with that color for each row. Seen many postings of people using existing images as icons but nothing with sprites.

      Any help would be greatly appreciated.

      Thanks,
      EE
        • 1. Re: Creating sprite in AdvanceDataGrid
          Gregory Lafrance Level 6
          This code may help:
          • 2. Re: Creating sprite in AdvanceDataGrid
            Level 7

            "Greg Lafrance" <glafrance@chikaradev.com> wrote in message
            news:gaon2p$s0d$1@forums.macromedia.com...
            > This code may help:
            >
            > ----- components/CircleRenderer.mxml -----
            > <?xml version="1.0" encoding="utf-8"?>
            > <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
            > creationComplete="init(data.color)"
            > width="15" height="30" horizontalAlign="center">
            > <mx:Script>
            > <![CDATA[
            > import mx.core.UIComponent;
            > private function init(color:uint):void{
            > var mySprite:Sprite = new Sprite();
            > mySprite.graphics.beginFill(color);
            > mySprite.graphics.drawCircle(0, 15, 10);
            > var uic:UIComponent = new UIComponent();
            > uic.addChild(mySprite);
            > this.addChild(uic);
            > }
            > ]]>
            > </mx:Script>
            > </mx:VBox>
            >
            > ----- Test.mxml -----
            > <?xml version="1.0"?>
            > <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
            > <mx:Script>
            > <![CDATA[
            > import mx.collections.ArrayCollection;
            > private var dgSource:Array = [
            > {color:0x990000,label:"server1"},
            > {color:0xFF0000,label:"server2"},
            > {color:0xFF8429,label:"server3"},
            > {color:0xFFCE9C,label:"server4"}
            > ];
            >
            > [Bindable]
            > private var ac:ArrayCollection = new ArrayCollection(dgSource);
            > ]]>
            > </mx:Script>
            > <mx:AdvancedDataGrid id="dg" dataProvider="{ac}">
            > <mx:columns>
            > <mx:AdvancedDataGridColumn dataField="label"/>
            > <mx:AdvancedDataGridColumn dataField="color"
            > itemRenderer="components.CircleRenderer"/>
            > </mx:columns>
            > </mx:AdvancedDataGrid>
            > </mx:Application>
            >

            I'd personally write the itemRenderer to take the color as a style
            ( http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html)
            and use the styleFunction from the AdvancedDataGrid. That's what it's there
            for...


            • 3. Re: Creating sprite in AdvanceDataGrid
              eexposito Level 1
              Worked great! Thanks for your help.
              • 4. Re: Creating sprite in AdvanceDataGrid
                eexposito Level 1
                Not out of the woods yet :)

                I tried your solution and it works great until I have many items and the datagrid has to scroll. When I scroll up and/or down the colors get all mixed up.

                Any help would be appreciated,
                EE
                • 5. Re: Creating sprite in AdvanceDataGrid
                  Level 7

                  "eexposito" <webforumsuser@macromedia.com> wrote in message
                  news:garjrj$g1q$1@forums.macromedia.com...
                  > Not out of the woods yet :)
                  >
                  > I tried your solution and it works great until I have many items and the
                  > datagrid has to scroll. When I scroll up and/or down the colors get all
                  > mixed
                  > up.
                  >
                  > Any help would be appreciated,

                  From the FAQ I post weekly:

                  Q: I've created a custom itemRenderer component to use in a List
                  based component (Datagrid, TileList, HorizontalList, etc.). When my List
                  first displays, everything looks fine, but when I scroll it or change the
                  dataProvider, some of the itemRenderers show values or formatting that
                  aren't right. How do I fix this?

                  A: List-based components don't draw a renderer for every item in the
                  dataProvider. Instead, they create enough to display what is on screen now,
                  plus one or two more waiting in the wings. This means they recycle the
                  renderers rather than creating new ones when you change dataProvider or
                  scroll up and down. When you use a creationComplete event to set up the
                  itemRenderer, that event doesn't happen again when the renderer is used for
                  a different set of data. The solution to this is to override the set data
                  protected function that most components have.

                  For more information, check out the following resources:
                  http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1
                  http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html



                  The most recent version of this document can always be found at
                  http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf