4 Replies Latest reply on May 18, 2009 10:10 AM by released87

    Referencing tilelist id

    released87

      Hi,

       

      I am developing a shopping cart similar to the Flex Store Application Demo by Adobe. The products are rendered from XML using a TileList. I am able to display the products fine, and add them to the cart, which is basically just a new array. However, I am having some difficulty trying to reference the ID of the item in the array from the TileList.

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <mx:TileList

       

      dataProvider="{cartData}">

       

       

           <mx:itemRenderer>

       

       

       

       

                <mx:Component>

       

       

       

       

                     <mx:Box>

       

       

       

       

                          <mx:Label text="SKU#: {data.number}" />

       

       

                          <mx:Text text="Unit Cost: ${data.cost}" />

       

       

                          <mx:HBox>

       

       

       

       

                               <mx:Label text="Quantity" />

       

       

                               <mx:TextInput width="30" text="{data.quantity}" change="outerDocument.quantity()" />

       

       

                               <mx:Button label="Remove from cart" click="outerDocument.removeCart(ID OF CURRENT ARRAY ITEM);" />

       

       

                          </mx:HBox>

       

       

                     </mx:Box>

       

       

                </mx:Component>

       

       

       

       

           </mx:itemRenderer>

       

       

      </mx:TileList>

       

      public

       

       

      function removeCart(selectedID:int):void {

       

       

           cartData.removeItemAt(selectedID);

           updateCart();

      }

       

      The problem I am having is I am unable to reference the current List item id in the tile list/cartData Array Collection. I have also tried adding an incremental id specific to the cartData Array Collection Item, so each time a new item is added the id is incremented. However, I am unable to find the particular array item containing the id.

       

      What is the best way to remove the array item using a button within the tile list component?

       

       

        • 1. Re: Referencing tilelist id
          Gregory Lafrance Level 6

          If you use a custom event, so you can pass the TileList selectedIndex:

           

          <mx:TileList id="myTL" dataProvider="{cartData}">
              <mx:itemRenderer>
                  <mx:Component>
                      <mx:Box>
                          <mx:Label text="SKU#: {data.number}" />
                          <mx:Text text="Unit Cost: ${data.cost}" />
                          <mx:HBox>
                              <mx:Label text="Quantity" />
                              <mx:TextInput width="30" text="{data.quantity}" change="outerDocument.quantity()" />
                              <mx:Button label="Remove from cart" click="outerDocument.removeCart(myTL.selectedIndex);" />
                          </mx:HBox>
                      </mx:Box>
                  </mx:Component>
              </mx:itemRenderer>
          </mx:TileList>
          
          public function removeCart(selectedIndex:int):void {
              cartData.removeItemAt(selectedIndex);
              updateCart();
          }
          
          1 person found this helpful
          • 2. Re: Referencing tilelist id
            released87 Level 1

            thanks, i actually used

            outerDocument.list_cart.selectedIndex

             

            I think I need to use outerDocument.

             

            Another question I have is this...

             

             

            <mx:TextInput

             

             

            width="30" id="input_quantity" text="{data.quantity}" change="outerDocument.quantity(outerDocument.list_cart.selectedIndex, outerDocument.list_cart.selectedItem.quantity as int)"

            />

             

            I want to change the quantity when a user types the quantity in the text input.

             

            public

             

             

            function quantity(selectedID:int, quantity:int):void {

            Alert.show(selectedID+

            " "+quantity);

             

            var cartObject:Object= new Object();

            cartObject.name= cartData[selectedID].name;

            cartObject.number= cartData[selectedID].number;

            cartObject.cost= cartData[selectedID].cost;

            cartObject.quantity= quantity;

            cartData.setItemAt(cartObject, selectedID);

            updateCart();

            }

             

            I am not sure how to reference the textInput. I tried outerDocument.list_cart.selectedItem.input_quantity.text so the value gets passed to the function that will change the value in the array collection. However, that did not work so i tried the data.quantity binding, however, because it is bindable i am unable to actually change the amount. Do you know how I can change the quantity?

            • 3. Re: Referencing tilelist id
              Gregory Lafrance Level 6

              Give the TextInput a value for the name property, then access it this way:

               

              click="setQuantity(myBtn.parent.getChildByName(myTI));"

               

              If this post helped, please mark it as such.

              • 4. Re: Referencing tilelist id
                released87 Level 1

                greg thank you much your help is mucho appreciated:)