2 Replies Latest reply on Nov 30, 2009 12:51 PM by cyber0897

    datagrid/list item saperator need help

    cyber0897 Level 1

      hey guys.... so i got another question lol

      im trying for a list to look exactly like the image i have attached to this post...

       

      basically space between each item and a dotted line image on the bottom of that image....

       

      anyone have any ideas??

       

       

      i have the following so far...

       

       

          <mx:TabNavigator width="275" height="400">
              <mx:VBox label="USER OPTIONS" width="100%" height="100%">
                  <s:List width="100%" height="100%">
                      <s:dataProvider>
                          <s:ArrayList>
                              <fx:Object label="Adjust Volume" />
                              <fx:Object label="Arm/Disarm System" />
                              <fx:Object label="Change Mastercode" />
                              <fx:Object label="Secondary Codes" />
                              <fx:Object label="Bypass the Sensors" />
                              <fx:Object label="Record/Delete Messages" />
                              <fx:Object label="Set Time" />
                              <fx:Object label="System Status" />
                          </s:ArrayList>
                      </s:dataProvider>
                  </s:List>
              </mx:VBox>
              <mx:VBox label="TROUBLESHOOTING">
                 
              </mx:VBox>
          </mx:TabNavigator>

        • 1. Re: datagrid/list item saperator need help
          Peter deHaan Level 4

          cyber,

           

          I'd look at making a custom item rendererer and then adding a repeating fill BitmapImage at the bottom (or top):

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/halo">
              
              <s:Label id="labelDisplay"
                       left="4" right="4" top="4" bottom="5" />
              <s:BitmapImage id="dottedLine"
                             source="@Embed('../redbluebg.gif')"
                             fillMode="repeat"
                             width="100%"
                             bottom="0" />
                
          </s:ItemRenderer>
          

           

          And then set the item rederer in your main app:

           

          <?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">
              <s:layout>
                  <s:VerticalLayout paddingLeft="20" paddingTop="20" />
              </s:layout>
              <s:controlBarContent>
                  <s:HSlider id="sl" minimum="20" maximum="600" value="100" />
              </s:controlBarContent>
              
              <s:List id="lst" itemRenderer="skins.foo" labelField="firstName" width="{sl.value}">
                  <s:dataProvider>
                      <s:ArrayList>
                          <fx:Object firstName="1.One" lastName="1.Two" />
                          <fx:Object firstName="2.One" lastName="2.Two" />
                          <fx:Object firstName="3.One" lastName="3.Two" />
                          <fx:Object firstName="4.One" lastName="4.Two" />
                          <fx:Object firstName="5.One" lastName="5.Two" />
                          <fx:Object firstName="6.One" lastName="6.Two" />
                          <fx:Object firstName="7.One" lastName="7.Two" />
                      </s:ArrayList>
                  </s:dataProvider>
              </s:List>
               
          </s:Application> 
          
          
          

           


          Peter

          • 2. Re: datagrid/list item saperator need help
            cyber0897 Level 1

            hey peter, thanks for the reply... i did something similar to that, and it works now...