Flex 4: activate the scrolling on a list with a custom itemRenderer

I extend the component Spark list to make it look like a Halo TileList component with a counter on top. The spark list default will add a horizontal scroll bar when the list content is wider than its width. This does not happen when I use a custom itemRenderer. I don't want the always visible horizontal scroll bar. It should be automatic. I tried all day to work around the problem and I have read the documentation and tried to change most of the component properties, but I cannot yet achieve what I wanted. Here is the source code:

Main application

<?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"
                  minWidth="955" minHeight="600" 
                  backgroundColor="#777777">
     
     <fx:Declarations>
          <fx:XML id="libraryXML" source="/assets/xml/library.xml"/>
     </fx:Declarations>
               
     <s:List id="library" itemRenderer="CustomItemRenderer" dragEnabled="true" contentBackgroundColor="#777777" selectionColor="0x555555"
               alternatingItemColors="[0x777777, 0x707070]">
          
          <s:dataProvider>
               <s:XMLListCollection source="{libraryXML.children()}"/>
          </s:dataProvider>
          
          <s:layout>
               <s:HorizontalLayout paddingLeft="0" paddingRight="0" clipAndEnableScrolling="true"/>
          </s:layout>
          
     </s:List>
</s:Application>

Custom ItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    xmlns:s="library://ns.adobe.com/flex/spark" >
     
     <s:states> 
          <s:State name="normal"/> 
          <s:State name="hovered"/>
     </s:states>
     
     <s:Group id="itemsRemaining" x="90" y="5" width="20" height="20">
          <s:Ellipse  height="20" width="20">
               <s:fill>
                    <s:SolidColor color="0x333333"/>
               </s:fill>
          </s:Ellipse>
          
          <s:Label text="{data.length}" color="0xFFFFFF" verticalCenter="0" horizontalCenter="0" fontSize="11" fontWeight="bold"/>
     </s:Group>
     
     <mx:Image id="image" source="{data.image}" width="116" height="116" horizontalCenter="0" verticalCenter="0"/>
     <s:Label id="itemName" fontSize="14" text="{data.label}" y="95" horizontalCenter="0" color="white"/>

</s:ItemRenderer>

DataProvider XML

<?xml version="1.0"?>
<items>
     <item>
          <label>stuff 1</label>
          <image>assets/images/img1.png</image>
          <length>4</length>
     </item>
     <item>
          <label>stuff 2</label>
          <image>assets/images/img2.png</image>
          <length>9</length>
     </item>
     <item>
          <label>stuff 4</label>
          <image>assets/images/img3.png</image>
          <length>7</length>
     </item>
     <item>
          <label>stuff 5</label>
          <image>assets/images/img4.png</image>
          <length>2</length>
     </item>
     <item>
          <label>stuff 3</label>
          <image>assets/images/img5.png</image>
          <length>5</length>
     </item>
     <item>
          <label>stuff 7</label>
          <image>assets/images/img6.png</image>
          <length>8</length>
     </item>
     <item>
          <label>stuff 8</label>
          <image>assets/images/img7.png</image>
          <length>11</length>
     </item>
     <item>
          <label>stuff 9</label>
          <image>assets/images/img8.png</image>
          <length>23</length>
     </item>
     <item>
          <label>stuff 10</label>
          <image>assets/images/img9.png</image>
          <length>4</length>
     </item>
     <item>
          <label>stuff 12</label>
          <image>assets/images/img10.png</image>
          <length>2</length>
     </item>
     <item>
          <label>stuff 11</label>
          <image>assets/images/img11.png</image>
          <length>8</length>
     </item>
</items>

Here is a screenshot:

http://img812.imageshack.us/img812/4331/screenshotir.png

Download (84 KB) Project:

http://www.2shared.com/file/2EpFB3K2/Flex4ListIssue.html

I think you could fix it in 2 ways

(1) call "invalidateDisplayList()" on the list to "updateComplete" event.

(2) which provide the dataProvider by using binding, preInitialize event to provide the dataProvider.

I think that data comes after the initial layout. While it will create this problem. If this is the reason why this should correct the problem.

Tags: Flex

Similar Questions

  • How can I activate the scroll function on my laptop mouse pad?

    Hello

    My laptop mouse pad is no longer scroll in FireFox or MS Word (or any other program I've tried) since switching from Vista to Windows 7. In the Windows Help section, it suggests that there should be a tab "Scrolling" in the mouse properties window, however, when I opened the window just 4 tabs are "Buttons," "Pointers," "Pointer Options" and "hardware". How can I switch on / activate the scrolling feature?

    Thank you

    John Cordukes Colleen

    Have you installed win7 drivers for your model laptop, laptop manufacturers website? I guess that your laptop modela win7 drivers available?

  • How can I select the files in a folder with the help of a list with the files you want and after that rename only the files using another list with desired new names?

    How can I select the files in a folder with the help of a list with the files you want and after that rename only the files using another list with desired new names?

    I have only:
    D: / images (where are necessary + not need files)
    -a list with only the necessary files
    -a list with new names for the files needed
    Thank you.

    Hi Pustiu,

    Thanks for posting in the Microsoft Community.

    You want to know how to select the files in a folder using a list with the files you want and after that rename only the files using another list with desired new names.

    I would have you post your query in the TechNet forums because it caters to an audience of it professionals.

    Your query will be better addressed there.

    Check out the link-

    http://social.technet.Microsoft.com/forums/en-us/w7itprogeneral/threads

    We know if you need help. We will be happy to help you. We, at tender Microsoft to excellence.

    Thank you.

  • How can I activate the scrolling on the touchpad mouse

    I'm trying to figure out how to do the scroll to work on my laptop touch pad mouse? I used to b able to click on the button and drag the page up and down. where the parameters to activate it bak?

    Hi CStockwell13,

    A. who is the manufacturer of the laptop?

    (B) since when is - not working?

    You may need to check the manufacturer's Web site and download the touchpad drivers and install it on your laptop.

    Once installation is complete, you will need to restart your laptop and configure the touchpad and its functions of scrolling on the touchpad console located in the Manager of tasks.

    Restart the computer and configure the touchpad and function of scrollbars by checking on the console of the touchpad.

    I hope this helps.

    Bindu S - Microsoft Support

    [If this post can help solve your problem, please click the 'Mark as answer' or 'Useful' at the top of this message.] [Marking a post as answer, or relatively useful, you help others find the answer more quickly.]

  • How to activate the scrolling of the effects

    Hello world

    I started using the Muse CC for 10 days, and I really like this software.

    But I have a problem since the first day, I can't activate the window of the effect:

    Capture d’écran 2016-05-05 à 11.01.40.png

    When I click on any item to give it a scroll effect, I click on the window, and this message is written: to activate the effect of scrolling, your page needs to have only a hard stop point (sorry for my broken English)

    Hope someone can help me,

    Nice day

    See you soon

    Hello

    To activate the effect of scrolling, you must make sure that your page is a page of fixed width monkey breakpoint.

    To convert your page to a breakpoint of monkey of fixed width page please try now.

    • If you have several breakpoints, then remove additional breakpoints by right click > remove breakpoint

    • Once you end up with a breakpoint then make sure that it is not a fluid width breakpoint

      • To ensure that a right-click on the breakpoint and ensure that "fluid width" is not checked

    Feel free to get back to me, in case you still need help.

    Kind regards

    Vivek

  • How can I activate the scrolling of the effects? I get "to activate scrolling effects your page must use a unique fixed stopping point." How can I do this?

    I have tried several things to enable scrolling of the effects, however, I can't seem to make it work. I get the message ' to activate the effects of scroll your page should use a unique fixed stopping point. " How can I change this so that my tab scroller are available? It's my first week using Muse, so I am very familiar with the software.

    Thank you!

    Hello

    is that you have already looked at working on the site so please be sure 2 things to activate the effects of roll for the site.

    1. There is only a breakpoint in the page as shown in the screenshot below.

    2 right-click on the breakpoint bar and select 'Breakpoint properties' and select 'Fixed width' instead of liquid.

     

    In case you are starting from scratch then be sure to select 'Fixed width' at the time of the creation of the new site.

    Kind regards

    Vivek

  • How to activate the lowpass filter of 6115 with daqmx?

    Hello

    I'm not able to find the property node to activate the low-pass filter of the 6115. Could someone give me a tip?

    Thank you very much.

    Best regards

    Michael

    Hello MichaGue_01 and welcome to the Forum OR,.

    This might help:

    What are SMIO (series S) devices have filters antirepliement?

    http://digital.NI.com/public.nsf/allkb/2326CE69C921A90286256F0800638E10?OpenDocument

  • Activate the integration of Analytics project with financial topics

    Guys, I know there are a few of us out there who is, or did the implementation of PA with Oracle Finance.

    I went through the docs and found how measures for "you can enable Oracle financial analytics for EBS use the dimension tables in Oracle project analytics.»

    Please find below the link to the documentation
    http://download.Oracle.com/docs/CD/E14223_01/BIA.796/e14216/anyimp_configfinance.htm#CHDCCCAJ

    However, I don't see this option for the domain "Finance - Accounting. I find myself manually by adding the option "Activate the Dimensions of project" by click on the < Add / Remove > option of the Configuration Tags tab under the theme "Finance - Accounting.

    Can anyone confirm that they faced the same "problem"? What actions did take? I have in the past executed charges without make this selection for all Oracle finance, and he always seemed to make the connection between the Oracle Finance and PA.

    Your help is greatly appreciated.

    Kind regards

    Made general don't have no connection to the dimensions of the project, that is to say there is no analysis of the dimensions of the project GL data. This is why you don't see in the GL subject area. If you added it yourself and lit, it has probably no effect.

  • How to replace the end mark of Panel with my custom PNG files?

    Lightroom has 2 points to end at the bottom of the left and right panel.

    With a right click on the brand to open the context menu, you can choose other brands in the submenu of ' Panel end Mark ", which also lets you define your own file PNG as an end Panel of brand by choosing"go to control panel of end record marks.

    When I chose "Go to control panel of end record marks", a folder named "" SOLUTION Explorer. "." EXE"opened, so I dragged my logo in PNG format in this folder.

    Regarding the manual, the added files will appear in the list with these built-in brands of Lightroom, however, I couldn't find mine.

    Does anyone have an idea about this problem?

    You guys kindly would check what is your "file panel end marks?

    THANK YOU

    The end brands folder of Control Panel on a Windows Vista system is located in brands end-users/username/AppData/Roaming/Adobe/Lightroom/Panel

  • How to make the menu drop-down list with a scroll bar

    Hello

    I have a drop-down list that is filled with different table sizes.

    I have a size of 30-element array.  Some of the last items just go off the screen at the bottom of the Simulator PB.

    Is it possible for me to add a drop-down scroll bar?

    DP = new DropDown();
    dp.rowHeight = 24;
    DP.prompt = "stuff";
    DP. Height = 34;
    DP.width = 230;
    DP.x = TitleTB.x + 170;
    DP.y = Title.y-3;
    addChild (dp);

    Some of the tables look like this-

    case 'List 1':
    dp.rowCount = 2;
    for (var i: int = 0; i<2;>
    {
    if(i==0)
    {
    DPP.splice (0);
    DPP.unshift({label:"blahblah"});)
    }
    else if (i == 1) {}
    DPP.unshift({label:"foofoo"});)
    }
    }
    dp.dataProvider = new DataProvider (dpp);
    addChild (dp);
    break;

    case "List2":
    dp.rowCount = 30;
    for (var n: int = 0; n<30;>
    {
    if(n==0)
    {
    DPP.splice (0);
    DPP.unshift({label:"lalalala"});)
    }
    Else if (n == 1) {}

    **********

    Delete the existing table using splice (0);

    then I add the new array of labels.

    Before, when I didn't have the splice (0), I only had the .unshift () and sometimes got bays combined together and a scroll bar appears automatically in the Simulator.  But then the berries were mixed.

    Thanks for the help!

    Hey mlin13,

    from the looks of it, your property rowCount is set too high. the rowCount property represents the number of lines displayed on the screen when the drop down menu is open. so if the number of rows is less than the amount of items on the list, it will create a scroll bar with a drop-down list for you. try to set the number of lines to a default value of 10 and and keep it manipulate your list from there. and see if you get the desired results. Good luck!

  • How to activate the scroll bar?

    Acrobat Reader 11 (XI): no bar scroll on the right, and I can't find the option in 'preferences' to enable it. Annoying to have to "grab and pull up" all the time. How to activate it?

    Thank you.

    GENIUS! It's simple. I have seen this, but do not know what it meant.

    Thank you!

  • Impossible to activate the widows xp after repair with another original drive is lost

    have a laptop a toshiba tecra a3x for about 8 to 7, has lost the original disc, had to do a repair with another drive, now it says mDiagnostic report (1.9.0019.0):
    -----------------------------------------
    Given WGA-->
    Validation status: invalid product key
    Validation code: 8

    Code of Validation caching: n/a
    Windows product key: *-* - BK84X - BP43D-VWWR3
    The Windows Product Key hash: ktt7V6c0R/4KZ3vpSFWLdyO3tP4 =
    Windows product ID: 76487-011-5308291-22820
    Windows product ID type: 5
    Windows license type: retail
    The Windows OS version: 5.1.2600.2.00010100.3.0.pro
    ID: {290F85A5-6AA8-4114-AE1D-8E1B0E68FEDB} (3)
    Admin: Yes
    TestCab: 0x0
    WGA version: registered, 1.9.42.0
    Signed by: Microsoft
    Product name: n/a
    Architecture: n/a
    Build lab: N/A
    TTS error: n/a
    Validation Diagnostic: 025D1FF3-230-1
    Resolution state: n/a

    WgaER data-->
    ThreatID (s): n/a
    Version: n/a

    WGA Notifications data-->
    Cached result: 8
    File: Yes
    Version: 1.9.40.0
    WgaTray.exe signed by: Microsoft
    WgaLogon.dll signed by: Microsoft

    OGA Notifications data-->
    Cached result: n/a, hr = 0 x 80070002
    Version: N/a, hr = 0 x 80070002
    OGAExec.exe signed by: n/a, hr = 0 x 80070002
    OGAAddin.dll signed by: n/a, hr = 0 x 80070002

    OGA data-->
    Office status: 100 authentic
    Microsoft Office Enterprise 2007 - 100 authentic
    OGA Version: N/a, 0 x 80070002
    Signed by: n/a, hr = 0 x 80070002
    Office Diagnostics: 025D1FF3-230-1_E2AD56EA-765-d003_E2AD56EA-766-0_E2AD56EA-134-80004005

    Data browser-->
    Proxy settings: N/A
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Win32)
    Default browser: C:\Program may Explorer\IEXPLORE.exe
    Download signed ActiveX controls: fast
    Download unsigned ActiveX controls: disabled
    Run ActiveX controls and plug-ins: allowed
    Initialize and script ActiveX controls not marked as safe: disabled
    Allow the Internet Explorer Webbrowser control scripts: disabled
    Active scripting: allowed
    Recognized ActiveX controls safe for scripting: allowed

    Analysis of file data-->

    Other data-->
    Office details: {290F85A5-6AA8-4114-AE1D-8E1B0E68FEDB}1.9.0019.05.1.2600.2.00010100.3.0.prox 32*-*-*-*-VWWR376487-011-5308291-228205S-1-5-21-527237240-2052111302-1177238915TOSHIBATECRA A3XTOSHIBAVersion 1.3020060221000000.000000 + 0005E0E3407018400F204090409Eastern Standard Time(GMT-05:00)03100100Microsoft Office Enterprise 2007127480B9502DF0D86oYWOW5ayFE3pZ + jvTpuXYsY64JE =14 89388-707-8722531-65687

    License data-->
    N/A

    Windows Activation Technologies-->
    N/A

    --> HWID data
    N/A

    Activation 1.0 data OEM-->
    BIOS string matches: Yes
    Marker of the BIOS string: 5A2A:Semp Toshiba Informatica Ltda. 5A2A:TOSHIBA CORPORATION
    Marker of OEMBIOS string. DAT: N/a, hr = 0x80004005

    Activation 2.0 data OEM-->
    N/A

    my copy is not original, and was old xp cd I use xp 3 cd for repair service it help me please. my original xp key I on the laptop, I run the validation applications, the result is pasted below

    Hello

    1. you receive an error message?

    2. using the same product key that came with your computer from the manufacturer?

    I suggest to run the Windows product key update tool in the following article and follow the instructions.

    Update your Windows product key

    http://Windows.Microsoft.com/en-us/Windows/help/genuine/product-key

    After updating your product key, you will be required to Activate Windows XP.

  • How to generate the display of mobile list with data of the user

    I try to develop a simple mobile application (mobile jquery) in Dreamweaver.

    I want to create a list of names of people from entering information via a form.

    The list would then be based on criteria that is last name or Department

    This require additional database programming or it is part of jquery mobile?

    I know it sounds simple, but I'm not a programmer, so I'm just my feet wet here.

    Thank you

    DW has no capability of database currently.  If you do programming server side with PHP and MySQL, there are commercial extensions, you can buy separately from the Web help and area of DMX.  But it's all depends on you how to work with data MySQL & PHP.  Development of applications for mobile devices is still a different learning curve.  I think DMX Zone has some extensions to help with that as well.

    http://www.DMXzone.com/go/32214/mobile-app-development/

    Nancy O.

  • I can't use the scroll on my touchpad with Firefox feature

    Computer is Gateway NV52 series with a touch pad working under Windows 7 64-bit multi-geste. Try using Mozilla Firefox 26

    Try to change the pref ui.trackpoint_hack.enabled on the topic: page default config-1 to 0 or 1 to see if that makes the touch pad work better.

    Close and restart Firefox after changing the ui.trackpoint_hack.enabled preferably.

    • UI.trackpoint_hack. Enabled (-1)(-1:autodetect;0:off;1:on)

  • How to activate the web front page post with an executable



Maybe you are looking for

  • Help!  I hate the new update.  I love type horizontally when replying to text messages, and now I can't!

    I hate the new updates!  I love type horizontally when I text and now I cannot since this morning when I did the update.  When I turn the screen all these pre's words come as 'Hello' help!  I want to go back before update!

  • Tecra A4: Bad DVD Firmware? Burning speed only 2 x

    Hello!I have a laptop Tecra A4 with a Matsu * a s UJ - 831 (firmware: 1.02) DVD burner.The speed of this burner is 8 x dvd - r dvd + r. But the new media in the market can only burn through 2 x speed.I tested different media e.g. Verbatim, TDK, Fuji

  • Flesh?

    Hello A peak of vector is attached. The flesh is placed correctly or it should align with the 'finger' lowest in the pic? The best Elmer

  • Satellite P25 - DVD-R/RW does not work, the reader does not see the drive

    I have a P25-S609 player gave me problems since it was a new computer. He totally went out then, I replaced the Multi-lecteur with a new FW UJ - 811 t and the thing still does not.DVD-RAM fuction is has never worked. I tried different disc and now th

  • Insert an individual to cells - EXCEL

    Hello world I would write my measurement results in an excel file. In Excel, I need a well-organized structure. Not just throw the values in the file. I need to start writing in excel from a cell specific, e.g. B1, 3. Is this possible with the standa