Flash :: Flex Spark List Scroll To Bottom When New Data Is Added
Oct 6, 2010
I have a Spark List (spark.components.List) backed by an ArrayCollection for its dataProvider. The List has a vertical scrollbar when there's too many rows to display. What I want is when a new row is added to the List for it to scroll to the bottom to show that new row.
I've tried calling List's ensureIndexIsVisible from a listener on the ArrayCollection. This doesn't work because the List hasn't yet fully rendered the new row. It will either scroll to the second from the last row, or throw the exception:
I have 2 questions about flex datagrids: How can I scroll it automatically to the bottom when new portion of data arrived to it (e.g. I added new items). Strange, but seems it doesn't scroll when I use scrolling wheel, is there any trick about it (especially for mac Users).
public function scroll():void { trace(chatboard.maxVerticalScrollPosition); chatboard.verticalScrollPosition = chatboard.maxVerticalScrollPosition; } <mx:TextArea id="chatboard" x="10" y="10" width="310" height="181" text="{chatMessages}" editable="false" verticalScrollPolicy="on" resize="scroll()"/>
But actually it don't work. The text area is not autoscrolled. Seems that 1) scroll is not called after new string is added to chatMessages.
I need to detect when a Flex Spark List (spark.components.List) data has changed so that I can programmatically change its scrollbar. I know that List is a an EventDispatcher but it's unclear which event I'd register for.
Edit: My List's dataProvider is an ArrayCollection that elements are added too. So the dataProvider is never replaced. I considered listening to the backing ArrayCollection, but it's possible the List will react to the change after my listener, which alters the scrollbar. Thus my listener's changes will be superseded by that of the List.
I'm setting selected element in s:List component with Actionscript, it works, but List doesn't scroll to selected item -- need to scroll with scrollbar or mouse. Is it possible to auto-scroll to selected item
I have a component extending a Spark List, and when I scroll using the mouse wheel it scrolls too much in one go. I have tried looking for the handler that deals with mouse wheel scrolling in the List class and VerticalLayout class to override but I cannot find it.
I have a situation where I have a List showing a queue of Upload Objects:
[Code]...
I would like to create three different views of the List: One showing All uploads in the queue Another showing only the Upload items with Upload.type == "Update" and another showing only the items with Upload.type == "Create". Another example of this would be on an email inbox, where we could filter "All, unread, or read". I realise I could just create three different lists, one for each view of the list (maybe I'm just being picky) but I was wondering: Is there is any easy way to conditionally select the items to display from a DataProvider based on a parameter (for example type =="Upload") so I don't have to juggle three separate ArrayCollections about?
I have a Flex application, I want to scroll the page to bottom when a button is pressed.Scroll bars is added by browser, they do not belong to flex app or component.I can do this by javascript but is there a way to do this with action script?
I'm trying to animate a list as I delete the top row. All the examples I can find use itemsChangeEffect to bind to the effect, but this property exists only in MX lists, not spark lists.
Any idea how I can get the same effect done in Spark Lists?
I'm trying to remove the top most item in the list with a slight fade out effect before the rest of the items move up to replace the gap.
How can Application's ControlBar be moved to its bottom in Flex 4.5 ?
The Adobe doc says only:
By default, the ApplicationSkin class defines the control bar area to appear at the top of the content area of the Application container with a grey background. Create a custom skin to change the default appearance of the control bar.
So I look at spark.skins.spark.ApplicationSkin and there is a controlBarGroup (does it hold the ControlBar contents?), but I don't know how to move it from top to the bottom.
do I have to necessarily have a application container as the root node in my mxml file?econd, I was reading this document on adobe's website and it says that the spark application container has no scroll bars by default and they can be added by using a custom skin. (Look at the table comparing the mx and spark application containers). But my problem is that my application container already has scroll bars by default and I want to get rid of them. I have a main application container with a custom child component that already has scroll bars. I just want the child to have the scroll bars and not the main application
I have to necessarily have a application container as the root node in my mxml file? Second, I was reading this document on adobe's website and it says that the spark application container has no scroll bars by default and they can be added by using a custom skin. (Look at the table comparing the mx and spark application containers). But my problem is that my application container already has scroll bars by default and I want to get rid of them. I have a main application container with a custom child component that already has scroll bars. I just want the child to have the scroll bars and not the main application. Right now I get 2 scroll bars nested within each other.
The 'recommendations' dataProvider is an ArrayCollection of String, which are generally sentences about as long as this one. By setting the variableRowHeight and wordWrap properties as shown, if a sentence is too long to fit on a single line, everything works fine- the row expands and the messages show on two lines, or occasionally three.
The space allocated for this panel within the entire canvas means if the total text size of 'recommendations' exceeds six lines, I need for the entire list scroll. This is also working just fine. The trouble is when using the mouse wheel to do the scrolling- Flex scrolls both the entire list and the single item where the mouse is hovering. Often this results in only the second half of a sentence being visible. Non-programmer friends I have asked to look at this noticed this, and tell me it as a problem. If a user does not notice the dual scrolling, and sees only a fragment of a sentence, it will be perceived as an error in the application.
Apologies for the rookie Q - trying to learn Flex/Actionscript and just having some basic layout issues. (Using FlashBuilder 4, with Flex 4.5 HERO SDK) I have a TitleWindow, and have embedded a mx:TabNavigator within it. I have then placed a list within the first tab and set its width/height to 100% However, there appears to be a gap between the top of the list, and the bottom of the tab menus. Why is this happening and what is the best way to ensure the top of the list aligns up flush with the top of the VBox?
I have a spark skinnable component which contains a datagroup with images. The datagroup is scrolled by hovering the mouse over it. Everything works fine except one thing: after I change the datagroup provider, I need to scroll down automatically. The problem is the images are not loaded immediately after I set the provider so (contentHeight - height) does not yet represent the actual maximum scrolling position. Is there an easy way of telling the datagroup to scroll down as its content loads? Because the workaround seems to be not so straightforward. This is the code for scrolling(thumbnailStrip is my datagroup):
I have a VBox containing a bunch of panels. I have implemented dragging and dropping but I need to be able to scroll automatically when the item is drug near the edge. I am having mixed results. I can get it to work, but not well. My example is below. It works if the user bounces their mouse around a little near the top or bottom edge, but I want it to work if they just hold the mouse there.[code]So if they are within 50px of an edge then it should scroll by 50px. I've exaggerated the numbers just to get an affect.
I have a Spark List with a data provider consisting of a list of filled out form applications. What is the best way to add a button to each List Item (form application)? This button will be named Open and will navigate to the specified form application.
I'm currently learning Flex, and am having the hardest time getting scroll bars to work. In short, I'm making a giant form for users to fill out, contained within a viewstack component. The user will type up information in one view, and it will be displayed in the other. But right now in the first canvas I have components that run off the screen and flex doesn't automatically add a scroll bar, so I added 'verticalScrollPolicy="on"' to my canvas. Now, while it gives me a scroll bar, it gives me an empty scroll bar. I still cannot move it up or down, meaning components are still trapped off the bottom of my screen. Am I missing something simpleEdit - I'm using Adobe Flex Builder 3, and the components it lets you drag in. http://img12.imageshack.us/img12/218/problem1f.jpg This is a picture of the problem, and i guess relavent code would be.
I have a spark list, which is based on a dataProvider. As the application runs, the data in the dataprovider can change, and also the dataProvider can be swapped for a different one
What I need to do is make sure that something is always selected in the list (unless it is empty)
I have two spark lists and want to drag items from one list to the other. When im dragging an item and over the other list item, i want the target item to change the background coloer.Basically instead of showing the black line indicating that I will drop between elements, I want to see the target item highlight.
How do I wordwrap in a spark list w/ an itemrenderer? This posting at[URL] works 100% but when I try to set a separate item renderer, I can't get the word wrapping...instead, I get an ugly horizontal scroll bar. HEre is my mxml:
I would like to add custom right clicks to a number of spark list controls. I have tried the following as an item renderer. (as per the flex 4 cook book). Full Render code here [URL] When I right click on the Spark List I simply get the Adobe Default Context menu. This is the same default behaviour I had before I added any code to this.
