How do I add a scroller to a Menu in Flex 4 - apache-flex

In flex 4 I'm using a PopUpButton with a Menu populated with records from the database.
For one of our clients, the data provider of the Menu has more than 50 elements.
When they click on the Menu it expands beyond the height of the screen without showing a scroller or responding to the mouse-wheel. So in effect there is no way to access the lower items on the menu.
So I need to somehow restrict the height of the menu and add a scroller.
The rowCount and maxHeight commands are having no effect.
var companyContextMenu:Menu=new Menu();
companyContextMenu.maxHeight=400;
companyContextMenu.rowCount=20;
The same code was working fine before migrating to Flex 4.
Any help is much appreciated.

In Flex there is a big different regarding scrollbars between version 3 and 4.
First, please don't mix the halos and the sparks.
Then put a scroller-Tag around the menu, that should become a scroller.
Just the container Group, DataGroup, VGroup, HGroup and TitleGroup implement IViewport and can handle the scoller-tag ouround them.
So, put your menu in one of the container above. Is this not handle for you, please post your code.
BR
Frank

Related

Appmaker panel & canvas height

I have a long form in a panel with lots of controls, however the Canvas/panel editor has a limited height of about 1000px and refuses to scroll to allow adding more controls.
I am able to make the panel 2000px and enable overflow to get the panel itself to scroll once the app is deployed, but how do I manage to drag/drop new controls/widgets?
TIA
At the bottom of the canvas is a round control which allows it to be extended beyond the default and therefore allows long controls.
A page's main panel should have a dimension property in the property editor, that specifies height and width. I'm able to set it to much larger values (e.g. 5000 pixels).
Once the main panel is large enough, you should be able to scroll down in it and drop new widgets where you need them to be.
It's also easy to accidentially drop in new panels and then stuff new widgets into the wrong panel, so make sure the panel structure is really what you believe it is (e.g. via the structure editor).

How to layout out a component differently depending on the amount of space available?

I am trying to build a sort of button bar in Flex - something like the horizontally laid-out bookmark bar you'd see in most modern web browsers, where when you run out of horizontal space, you can click on the arrows button(>>) to get a drop-down to see the rest of the items which did not fit into the horizontal space. Problem is, how can I know how much horizontal space is available for me to tell how many buttons to render into the button bar? This need doesn't appear to be support by the general layout manager framework.
You can check the width of the parent container, and if that is less than the combined widths of your objects that you've attached with AddChild or AddElement, then you don't have enough space and need use your arrow functionality.

How to add Scroller in Main application/Windows of Flex?

I am new to Flex. I am trying to add a scroller in my main application/windows.
Is that possible?
I found out it is possible to add scoller bars in DataGrid, like horizontalScrollPolicy="on".
How to implement it in containers like Group,Panel and etc?
Thanks
The answer differs between flex 4 (spark) components and flex 3 (halo) container components. For spark components such as Groups, you need to wrap your group in a Scroller component to get scrollbars to appear when all of the group's content cannot be viewed. Halo container components, such as Canvas, have built in support for scrollbars, meaning they should show up automatically when all of the canvas's content cannot be viewed. Hope that helps.
The Application tag also has horizontalScrollPolicy and verticalScrollPolicy properties.
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#horizontalScrollPolicy
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#verticalScrollPolicy
In the Spark architecture, you want to look at the Scroller class. This is a good tutorial:
http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html

Resizing contents in TabNavigator in flex3

Hi I am working on tabNavigator in flex 3.
I have tileList within it. Contents in the tab comes dynamically so I cannot provide explicitly fixed height and width.
I need to resize the tabs depending on the contents within it.
To resize the tabs I have enabled 'resizeToContent' property of tabNavigator.For some reason it is not resizing as expected.
Could anybody please suggest me the way out of it.
Thanks
Hey thanks Gregor for you reply,
'resizeToContent' works fine for other child items in tabNavigator but fails when I use tileList as child in tabNavigator that time tileList resizes to its default size(4 rows are only visible). So i was wondering if there any way so that I can force tileList to display all its items without putting scrollbars after its default size.
just by invalidating size on creationComplete ,will that resize all tabs for me. I am having n-number of tabs in tabNavigator as user can add tabs and content within it.
Could you please explain me, how can I achieve this.
I am new to flex so just getting confused with its behaviorand struggling with this issue from long time.
resizeToContent only works when the user changes tabs. If you want the tab to resize once the content has been added, you need to listen for the appropriate event (creationComplete probably) and invalidate the size of the TabNavigator. That will give it an opportunity to resize itself.

Flex: Displaying more than 5 things at a time in a DropDown (ComboBox)

I have a ComboBox in Flex with about 20 items. How do I display all of them in a dropdown with no scroll bar? Right now, Flex displays 5 at a time in the dropdown and puts a scrollbar to scroll for more.
Here's an example:
http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/#more-711
How do I make the dropdown bigger in this example so it shows all 10 items at once?
Found it: 'rowCount' is the property to change. It defaults to 5.
For ones who search for same thing for spark combo:
for spark components that extend SkinnableDataContainer (including ComboBox) you can specify layout with
requestedMinRowCount , requestedMaxRowCount
properties, and do as much changes as you want with the help of skin(this layout directly goes to DataGroup skinpart inside skin).

Resources