4 Replies Latest reply on Mar 12, 2010 3:44 PM by jimmyoneshot

    Using Click Functions Inside ItemRenderers Causing "Undefined Method" error

    jimmyoneshot

      I have a tilelist which has an item renderer and the item renderer has a small button in it which intentionally should remove the specific item once the button is clicked making each item removable from the tilelist by clicking the little button on each item within the tilelist. However when I try to apply my removeProduct() function, which I've already defined, to the button I get the error "Call to a possibly undefined method" but this function can be applied to other buttons fine so I know it has been defined correctly. It just seems to throw this error when I try to apply it to the button inside the itemrenderer of my tilelist. Anyone else had this problem? Is it to do with it being within a item renderer?

       

      Here's my code for the function:-

       

       

       

      public function removeProduct():void {

       

      var item:Object = cartTilelist.selectedItem;

       

      var idx:int = shoppingCartAC.getItemIndex(item);

      shoppingCartAC.removeItemAt(idx);

      }

        • 1. Re: Using Click Functions Inside ItemRenderers Causing "Undefined Method" error
          levancho Level 3

          I am not sure why its not working,looks like your selected item is not selected yet by the time click even fires on that button, ...

          but I can give you advice on better way of doing selfremoval routine, , it is fairly straightforward and simple.

           

          whenever button is clicked, dispatch an Event from Item Renderer   (this event has  to be bubblable) and it can be Custon Event.

           

          2) add listener to your tilelist,for that Event,  that way,  once event bubbles up from dispatcher (Itemrenderer)  to tilelist, your listener will get invoked, and then if you included item that was clicked inside the Event itself you can just  use that to remove it from dataprovider or, determine the item from ItemRenderer reference using target property of the event.

          I preferen former option of including data property in the event, that way it is more coherent .

           

          Regards

          1 person found this helpful
          • 2. Re: Using Click Functions Inside ItemRenderers Causing "Undefined Method" error
            jimmyoneshot Level 1

            I think that may be the problem. The thing is I don't want the items to be selected because the button is part of each item i.e. it is placed within the itemrenderer of the tilelist if that makes sense so clicking on each of the buttons within each of the items of the tilelist will reomve that particular item, or at least that's the idea. The tilelist basically acts as a shopping cart which I want users to be able to add and remove items to and from. It works if i create a button outside the tilelist and assign the remove function to that then items can be removed by selecting the item in the tilelist and then clicking the remove button but as I say I want each item to have it's own remove button which removes it. Does that makes sense?

             

            I've never heard of bubblable in flex and that solution seems a little complicated. Do you know of any similar examples? I'll look into it. Cheers for your help so far.

            • 3. Re: Using Click Functions Inside ItemRenderers Causing "Undefined Method" error
              levancho Level 3

              forst create custom Event:

               

              public class MyItemEvent extends Event
                  {
                      public static const MY_ITEM_REMOVE:String = "MyItemEventRemove";
                    
                    
                      private var _myItemClicked:Object;
                    
                      public function get myItem() : Object{
                          return this._myItemClicked;
                      }
                    
                      public function MyItemEvent(type:String,itemParam:Object, bubbles:Boolean=true, cancelable:Boolean=false)
                      {
                      
                          super(type, bubbles, cancelable);
                          this._myItemClicked = itemParam;
                      }
                    
                      override public function clone():Event{
                          return new MyItemEvent(this.type,this._myItemClicked,this.bubbles,this.cancelable); // bubbling support inside
                      }
                    

               

              inside you Item renderer create util function (you dont have to, but its cleaner) :

               

              private function removeItem() : void {
                              this.dispatchEvent(new MyItemEvent (MyItemEvent .MY_ITEM_REMOVE,this.data,true,true));
              }

              and then third step (again inside Item renderer)  asign that function as click event handler to button:

              <mx:LinkButton id="removeButton" label="X" fontSize="8"  paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" cornerRadius="6" color="#FF0000" click="removeItem()"  x="1" y="-2"/>

               

              now wherever you have your  tilelist add listiner to it following way , (or any other way you find it fit )

               

               

              yourTileListComponent.addEventListener(MyItemEvent .MY_ITEM_REMOVE,
                                   function(e:MyItemEvent):void
                                  {
                                      trace(this + "ItemTo Remove is: " + e.myItem);
                                  }
              );
              1 person found this helpful
              • 4. Re: Using Click Functions Inside ItemRenderers Causing "Undefined Method" error
                jimmyoneshot Level 1

                Thanks a lot my friend. You are very helpful and very skilled in ActionScript. My problem is though I've never used actionscript much before so I have trouble implementing it so it works with my mxml file. I've now added the removeitem function and set it to the click of the button. I've also applied the event listener to my tilelist.

                 

                Then I created a folder within my src folder called events and made an actionscript file in that called MyItemEvent and in that file I put it within a package like so. Do I have to do anything further to get this actionscript to work within my mxml like define it in a metadata tag or put it a a namespace? Sorry but as I say I've hardly ever used actionscript:-

                 

                 

                package
                
                
                public
                
                
                import flash.events.Event;
                
                
                public static const MY_ITEM_REMOVE:String = "MyItemEventRemove";
                
                
                
                private var _myItemClicked:Object;
                
                
                public function get myItem() : Object{
                
                return this._myItemClicked;}
                
                
                
                public function MyItemEvent(type:String,itemParam:Object, bubbles:Boolean=true, cancelable:Boolean=false){
                
                
                
                super(type, bubbles, cancelable);
                
                this._myItemClicked = itemParam;}
                
                
                
                override public function clone():Event{
                
                return new MyItemEvent(this.type,this._myItemClicked,this.bubbles,this.cancelable);}
                }
                
                } 
                
                
                
                 class MyItemEvent extends Event{
                
                 events{
                
                

                 

                After doing all that though when I try to run it I get the error "type was not found or was not a compile time constant: MyItemEvent" on the line:-

                 

                function(e:MyItemEvent):void

                 

                of the event listener.

                 

                Thanks again for your help.