10 Replies Latest reply on Jul 5, 2009 7:48 PM by Benoitcn

    My itemrenderer is mercurial!

    Benoitcn Level 1

      The itemrenderer is a HBox. There is a check and a label in the HBox.

      When I selected any of the checkbox and scrolled the scrollbar of the List which used the itemrenderer, the stange thing happened, the selected checkbox is no longer the same checkbox !! Maybe the last one, maybe the second one ~~~  How can I fix this ?
        • 1. Re: My itemrenderer is mercurial!
          Michael Borbor Level 4

          Probably an issue with item renderers being recycled, could you post a bit

          of your code?

          • 2. Re: My itemrenderer is mercurial!
            Benoitcn Level 1

            This is the code

            <mx:HBox horizontalAlign="center" verticalAlign="top" top="30" left="9" right="13" bottom="4">

              <mx:VBox width="33%" top="0" horizontalScrollPolicy="off" horizontalAlign="center" height="100%">

               <mx:TabNavigator width="100%">

                <mx:VBox label="按户藉地">

                 <mx:List dataProvider="" width="100%" liveScrolling="true"

                    horizontalScrollPolicy="off"

                    creationComplete="assortListCreationCompleteHandler(event)"

                    itemRenderer="renderer.assortRenderer"/>

                </mx:VBox>

                <mx:VBox label="按居住地"/>

               </mx:TabNavigator>

               <mx:Button label="导出所有结果"/>

               <mx:Button label="显示详细内容"/>

              </mx:VBox>

             

            This is the Itemrenderer:

            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

            <mx:Script>

              <![CDATA[

               public var callback:Function = null;

               public function assortSelected(event:MouseEvent = null):void

               {

                parentDocument.dispatchEvent(new AssortSelectedEvent(AssortSelectedEvent.ASSORTTYPEEVENT, assortType.text, false, false));

               }

              ]]>

            </mx:Script>

            <mx:CheckBox click="assortSelected(event)"/>

            <mx:Label id="assortType" text="" x="23"/>

            </mx:Canvas>

             

             

             

            在2009-07-06,"Michael Borbor" <forums@adobe.com> 写道:

            >Probably an issue with item renderers being recycled, could you post a bit

            >of your code?

            >

            • 3. Re: My itemrenderer is mercurial!
              Michael Borbor Level 4

              Where do you set the data for the checkbox to be selected or not?

              • 4. Re: My itemrenderer is mercurial!
                Benoitcn Level 1

                When I clicked the checkbox in runtime.

                I don't set the checkbox in the code. I wanna set them all unselected.

                 

                 

                 

                在2009-07-06,"Michael Borbor" <forums@adobe.com> 写道:

                >Where do you set the data for the checkbox to be selected or not?

                >

                • 5. Re: My itemrenderer is mercurial!
                  Michael Borbor Level 4

                  If that's what you want to do then I'll suggest you to use a dataProvider,

                  then change the dataProvider to reflect selected or unselected, finally

                  binding the checkbox to the data.whateverCheckBoxField

                  • 6. Re: My itemrenderer is mercurial!
                    Benoitcn Level 1

                    I have another project has the same problem. This project use the creationComplete event to bind the first  component in the itemRenderer.

                     

                    This is the code:

                       

                    • 7. Re: My itemrenderer is mercurial!
                      Benoitcn Level 1

                      I changed the code like this, the problem is solved !

                      Is there a way to achieve two-way binding in flex3 ?

                      Thanks Michael

                       

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

                      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">

                      <mx:Script>

                        <![CDATA[

                         public var callback:Function = null;

                         public function assortSelected(event:MouseEvent = null):void

                         {

                          parentDocument.dispatchEvent(new AssortSelectedEvent(AssortSelectedEvent.ASSORTTYPEEVENT, assortType.text, false, false));

                         }

                         private function selectedChangeHandler(event:Event):void

                         {

                          data.selected = !data.selected;

                         }

                        ]]>

                      </mx:Script>

                      <mx:CheckBox click="assortSelected(event)" selected="{data.selected}" change="selectedChangeHandler(event)"/>

                      <mx:Label id="assortType" text="{data.label}" x="23"/>

                      </mx:HBox>

                       

                       

                       

                       

                      在2009-07-06,"Michael Borbor" <forums@adobe.com> 写道:

                      >If that's what you want to do then I'll suggest you to use a dataProvider,

                      >then change the dataProvider to reflect selected or unselected, finally

                      >binding the checkbox to the data.whateverCheckBoxField

                      >

                      • 8. Re: My itemrenderer is mercurial!
                        Michael Borbor Level 4

                        I don't think there's a wise way to do that  using item renderers in Flex 3.

                        • 10. Re: My itemrenderer is mercurial!
                          Benoitcn Level 1

                          This aritcle is very useful to me. I can use those concept immediately.

                           

                          But I have a another problem about the Repeater.

                          The itemrenderer we're talking about is a filter to filte the data of the Repeater named stairDetailListRepeater. And then change the component's style which created by the Repeater to represent that is what the user finds.

                          When the checkbox in the itemrenderer selected, the parentApplication to handle this event. This's hole work flow.

                          But the sentence in purple is not working fine. How can I fix this ?

                           

                           

                            private function assortLockedHandler(event:AssortSelectedEvent = null):void
                            {
                                   /* testing code */
                                   var ar:Array = [7, 4, 5, 9];
                                   for (var i:int = 0; i < ar.length; i++)
                                   {

                                         /* I have changed a lot of style properties, but ~ */
                                        stairContainer[ar[i]].setStyle("background-color", "#ffffff");
                                   }

                           

                                   /* this's working very well */
                                   Alert.show(null, event.assortType);
                            }

                           

                          <mx:HBox horizontalAlign="center" verticalAlign="top" top="30" left="9" right="13" bottom="4">
                            <mx:VBox width="33%" top="0" horizontalScrollPolicy="off" horizontalAlign="center" height="100%">
                            <mx:TabNavigator width="100%">
                              <mx:VBox label="按户藉地">
                              <mx:List dataProvider="{assort}" width="100%" liveScrolling="true"
                                  horizontalScrollPolicy="off"
                                  creationComplete="assortListCreationCompleteHandler(event)"
                                  itemRenderer="renderer.assortRenderer"/>

                              </mx:VBox>
                              <mx:VBox label="按居住地"/>
                            </mx:TabNavigator>
                            <mx:Button label="导出所有结果"/>
                            <mx:Button label="显示详细内容"/>
                            </mx:VBox>
                            <mx:Tile id="stairDetailList" width="67%" top="0" paddingLeft="5" paddingRight="5"
                              horizontalGap="3" verticalGap="3" paddingTop="4" paddingBottom="4"
                              shadowDirection="center" shadowDistance="7" kerning="true" height="100%">
                            <mx:Repeater id="stairDetailListRepeater" count="72" recycleChildren="true" startingIndex="1" dataProvider="{dataSource}">
                              <mx:Canvas id="stairContainer" styleName="HouseButtonSkin" width="85" height="65">
                              <mx:Label id="stairID" text="911" condenseWhite="true" horizontalCenter="0" verticalCenter="0"/>
                              </mx:Canvas>
                            </mx:Repeater>

                            </mx:Tile>
                          </mx:HBox>

                           

                           

                          <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
                          <mx:Script>
                            <![CDATA[
                            public var callback:Function = null;

                            private function selectedChangeHandler(event:Event):void
                            {
                              data.selected = !data.selected;
                              if (data.selected == true)
                                   parentDocument.dispatchEvent(new AssortSelectedEvent(AssortSelectedEvent.ASSORTTYPEEVENT, assortType.text, false, false));
                            }

                            ]]>
                          </mx:Script>
                          <mx:CheckBox selected="{data.selected}" change="selectedChangeHandler(event)"/>
                          <mx:Label id="assortType" text="{data.label}" x="23"/>
                          </mx:HBox>