8 Replies Latest reply on Oct 21, 2011 9:37 AM by Maximist

    Issue with List and itemRenderer

    Maximist Level 1

      Hallo. I need a little help. I have a list and i populate that list with this code:

       

      var myArrayList:ArrayList = new ArrayList(myArray);

      this.myList.dataProvider = myArrayList;

       

      The code of my list is this:

       

       

      <s:List id="lst_listaAmiciDaInvitare" width="220" height="245" x="15" y="56" skinClass="componentiInterni.listaAmiciDaInvitare.listaAmiciPerInvito" buttonMode="true">

                                                                    

                         <s:layout>

                                 <s:VerticalLayout gap="2"/>

                           </s:layout>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                                                    

                <s:itemRenderer>

                               <fx:Component>

                                      <listaAmiciDaInvitare:listaAmiciItemRenderer/>

                               </fx:Component>

                   </s:itemRenderer>

                                                                    

      </s:List>

       

       

       

      The code of my item renderer is this:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"

                      xmlns:d="http://ns.adobe.com/fxg/2008/dt" width="200" height="16" autoDrawBackground="true">

       

                      <fx:Script>

                                     <![CDATA[

                                                    

                                          protected function gruppoPrimario_clickHandler(event:MouseEvent):void

                                                     {

                                                 if(this.chk_selezioneAmicoDaInvitare.selected)

                                                       this.chk_selezioneAmicoDaInvitare.selected = false;

                                                 else

                                                       this.chk_selezioneAmicoDaInvitare.selected = true;

                                                     }

                                                    

                                     ]]>

                      </fx:Script>

                     

                      <s:states>

                                     <s:State name="normal"/>

                                     <s:State name="hovered"/>

                                     <s:State name="selected"/>

                      </s:states>

                     

                      <s:Group  click="gruppoPrimario_clickHandler(event)">

       

                                     <s:CheckBox id="chk_selezioneAmicoDaInvitare" width="5" height="5" left="0" verticalCenter="0"/>

                                    

                                                <s:Label id="lbl_nomeGiocatore" x="15" top="4" width="190" maxWidth="190" maxDisplayedLines="1" text="{data.nome}" fontFamily="Arial" fontSize="12" textAlign="left"/>

                                    

                      </s:Group>

                     

      </s:ItemRenderer>

       

       

      Now, My list has 180 elements and as you can see from code, each element is a checkbox and a label. Everything populates correctly and i can see every text and checkbox. The problem is that, when i click on a checkbox, this checkbox become selected but not alone.. In the whole list, in a casual way, there other checkboxes which becomes selected and i don't know why... It seems a list update problem but i am not sure.. Why, if i click on a single checkbox, 5 checkbox becomes selected??..

       

      Hope you can help me.

       

      Max

        • 1. Re: Issue with List and itemRenderer
          Flex harUI Adobe Employee

          Renderers are recycled.  See the itemrenderer post on my blog

           

          --

          Alex Harui

          Flex SDK Team

          Adobe System, Inc.

          http://blogs.adobe.com/aharui

          • 2. Re: Issue with List and itemRenderer
            Maximist Level 1

            This your example could solve exactly my problem:

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >

             

            <mx:Script>

            <![CDATA[

             

            private var stateList:Array = [

                            { label: "Alaska", selected: false },

                            { label: "Arkansas", selected: false },

                            { label: "California", selected: false },

                            { label: "Delaware", selected: false },

                            { label: "Florida", selected: false },

                            { label: "Georgia", selected: false },

                            { label: "Hawaii", selected: false },

                            { label: "Massachusetts", selected: false },

                            { label: "Nevada", selected: false },

                            { label: "Pennsylvania", selected: false },

                            { label: "South Dakota", selected: false },

                            { label: "Tennessee", selected: false },

                            { label: "Utah", selected: false },

                            { label: "Virginia", selected: false },

                            { label: "Washington", selected: false }

                            ];

             

             

            private function showSelected():void

            {

                var s:String = "";

                var n:int = stateList.length;

                for (var i:int = 0; i < n; i++)

                {

                    if (stateList[i].selected)

                        s += stateList[i].label + "\n";

                }

                ta1.text = s;

            }

             

            ]]>

            </mx:Script>

             

            <mx:List id="list1" initialize="list1.dataProvider = stateList" width="200" >

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:CheckBox selectedField="selected" change="data.selected = selected" />

                    </mx:Component>

                </mx:itemRenderer>

            </mx:List>

            <mx:Button label="show selected" click="showSelected()" />

            <mx:TextArea id="ta1" width="200" height="100" />

             

            </mx:Application>

             

            The only problem is that those are mx components and i have spark components and, with spark components it does not work..I tried with mx and it works but not with spark... For example the selectedField property in the mx checkbox does not exists in the spark checkbox... Do you know the solution with spark components and list?

             

            Thx a lot

             

            Max

            • 3. Re: Issue with List and itemRenderer
              Claudiu Ursica Level 4

              something like this works.

               

               

              <?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:Script>

                      <![CDATA[

                          import mx.collections.ArrayList;

                          private var stateList:Array = [

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                              ,

                             

                              ];

               

               

                          private function showSelected():void

               

                          {

                              var s:String = "";

                              var n:int = stateList.length;

               

                              for (var i:int = 0; i < n; i++)

                              {

                                  if (stateList[i].selected)

                                      s += stateList[i].label + "\n";

                              }

                              ta1.text = s;

                          }

                      ]]>

               

                  </fx:Script>

               

                  <s:layout>

                      <s:VerticalLayout/>

                  </s:layout>

               

                  <s:List id="list1"

                      initialize="list1.dataProvider = new ArrayList(stateList)"

                      width="200">

                      <s:itemRenderer>

                          <fx:Component>

                              <s:ItemRenderer>

                                  <fx:Script>

                                      <![CDATA[

                                          protected function checkbox1_changeHandler(event:Event):void

                                          {

                                              data.selected = event.target.selected;

                                          }

                                         

                                          override public function set data(value:Object):void

                                          {

                                              super.data = value;

                                              cb.label = data.label;

                                          }

                                      ]]>

                                  </fx:Script>

                                  <s:CheckBox id="cb" change="checkbox1_changeHandler(event)"/>   

                              </s:ItemRenderer>

                          </fx:Component>

                      </s:itemRenderer>

                  </s:List>

               

                  <s:Button label="show selected"

                      click="showSelected()"/>

               

                  <s:TextArea id="ta1"

                      width="200"

                      height="100"/>

               

              </s:Application

              • 4. Re: Issue with List and itemRenderer
                Maximist Level 1

                I tried you code but unfortunatly, when i select 1 checkbox, in my list,  there are many checkboxes selected in the list... My problem is still there.

                 

                Max

                • 5. Re: Issue with List and itemRenderer
                  Claudiu Ursica Level 4

                  The snipped attempts to translate the mx to spark from your example. It am selecting Alaska as I type this and get Alaska in the text area. Unfortunately the copy/paste it does not paste entirely on the forum. However the missing parts i did not modify them...

                   

                   

                  If you are referring to the first code snippet you pasted the one with Italian id's, you'll have to provide some more code.

                   

                  C

                  • 6. Re: Issue with List and itemRenderer
                    Maximist Level 1

                    Thx for the answer. No, I am not referring to the first code (italian) i wrote... I am referring to the second as you understand ( the code from Flex harUI blog). That code works perfectly with mx components but not with spark. Try the code you pasted to me.. Try to add more elements in the ArrayList (about 100) launch the prog and try select 1 check box, then scroll with scrollbars.. Don't you see other checkboxes selected??..

                     

                    Thx

                     

                    Max

                    • 7. Re: Issue with List and itemRenderer
                      Claudiu Ursica Level 4

                      That is because as Alex said renderers are reused and since my posted code did not update the selected state of the checkbox in the datasetter, nor bind to it it is obviously reproducible. 

                       

                      override public function set data(value:Object):void

                      {

                          trace("Tester.data(value) ", value);

                          super.data = value;

                          cb.label = data.label;

                          cb.selected = data.selected;

                       }

                       

                       

                      Updating the selected on the cb will fix the issue.

                       

                      C

                      • 8. Re: Issue with List and itemRenderer
                        Maximist Level 1

                        Thx to you Claudiu. Now it finally works.

                         

                        Thx again.

                         

                        Max