1 Reply Latest reply on May 17, 2011 11:54 PM by Anirudh Sasikumar

    Item Renderers!! errr

    released87 Level 1

      Hello,

       

      I love Flex and consider myself a pretty decent developer, but these item renderers are driving me NUTS! Hopefully someone can enlighten me. I basically have an array collection which contains three properties in each row (field, operator, value). I want to display this data in a Spark List, with a ComboBox for 'field' and 'operator' and a text input for 'value'. The fields_collection dataprovider is created dynamically, but is basically just a list of different fields to choose from.

       

      I want to assign the 'filters_collection' to the list, and have the ComboBoxes read the data.field/data.operator to select the index of the item in the ComboBox. I then want to be able to change the values, and access modified values on a button click of the parent document:

       

      <s:ArrayCollection id="fields_collection">

                 <fx:Object label="id" />
                   <fx:Object label="modified" />
                   <fx:Object label="date" />
                   <fx:Object label="uid" />
                   <fx:Object label="status" />

      </s:ArrayCollection>

      <s:ArrayCollection id="operator_collection">
                  <fx:Object label="equals" />
                  <fx:Object label="not equals" />
                  <fx:Object label="like" />
                  <fx:Object label="greater than" />
                  <fx:Object label="less than" />
              </s:ArrayCollection>
              <s:ArrayCollection id="filters_collection">
                  <fx:Object field="id" operator="equals" value="34" />
                  <fx:Object field="uid" operator="greater than" value="PRO-110404-001-A" />
                  <fx:Object field="date" operator="less than" value="12-12-12 00:00:00" />
                  <fx:Object field="status" operator="like" value="open" />
                  <fx:Object field="level" operator="not equals" value="6" />
              </s:ArrayCollection>

      <s:List dataProvider="{filters_collection}">
                  <s:itemRenderer>
                      <fx:Component>
                          <s:ItemRenderer>
                              <fx:Script>
                                  <![CDATA[   
                                                                    
                                      public function remove_filter(data:Object):void
                                      {
                                          outerDocument.filters_collection.removeItemAt(outerDocument.filters_collection.getItemInd ex(data));
                                      }
                                     
                                      public function save_filter(data:Object):void
                                      {
                                          var updated_data:Object= new Object();
                                          updated_data.field= input_field.selectedItem.label;
                                          updated_data.operator= input_operator.selectedItem.label;
                                          updated_data.value= input_value.text;
                                          outerDocument.filters_collection.setItemAt(updated_data, outerDocument.filters_collection.getItemIndex(data));
                                      }
                                     
                                      public function get_operator_index(data:Object):int
                                      {
                                          var selected:int= outerDocument.operator_collection.getItemIndex(data);
                                          return selected;
                                      }
                                     
                                      public function get_field_index(data:Object):int
                                      {
                                          var selected:int= outerDocument.fields_collection.getItemIndex(data);
                                          return selected;
                                      }
                                  ]]>
                              </fx:Script>
                              <s:HGroup>
                                  <s:ComboBox id="input_field" dataProvider="{outerDocument.fields_collection}" width="300" selectedIndex="{get_field_index(data.field)}" />
                                  <s:ComboBox id="input_operator" dataProvider="{outerDocument.operator_collection}" selectedIndex="{get_operator_index(data.operator)}" />
                                  <s:TextInput id="input_value" text="{data.value}"/>
                                  <s:Button label="Remove Filter" click="remove_filter(data)" />
                                  <s:Button label="Save Filter" click="save_filter(data);" />
                              </s:HGroup>           
                          </s:ItemRenderer>
                      </fx:Component>
                  </s:itemRenderer>
              </s:List>

       

      If I click the 'Save Filter' button it will update, but I want to do this automatically without the user having to click a button. I also cannot figure out why the ComboBox won't change.

       

      I really have been scratching my head on these item renderers, between the 3 recent versions of Flex (Flex 3, Flash Builder 4 and 4.5), and both MX and Spark components, I tend to get pretty confused with all the information out there. I feel like these Itemrenderers are a lot more complicated than they need to be... Help please!!!

       

      -Jesse