How do I make this Flex Layout

Posted on 2007-10-09
Last Modified: 2008-01-09
Hi, I am trying to make the following FLEX layout.

How would I do this, note: I am not familiar with flex at all, I prefer the design layout to the code layout. Thanks.

Question by:tariqjamal
    LVL 10

    Expert Comment

    You'd probably be best to start with a Canvas and use the constraint values to keep the panel on the left and the tab navigator sized correctly.  Then it's a matter of playing with the interior items.  It might be easier of you attempted the layout and let us know if there were specific difficulties you were running into.  Give it a go, and I'd love to help out from there.

    Author Comment

    Ok, here is my problem, I've uploaded a pic to show you.

    I have changed the layout a little bit, but my question is this. These are the changes I'm having trouble with

    I need to know how to:

    make the buttons on the left are aligned to the bottom of the screen.

    and the height of the right datagrid to be the full height of the panel minus 20 px on the top (space for buttons).

    The link to my screen shot is

    Thanks. Also, if you know anything about adding an image within a datagrid let me know. Thanks.
    LVL 10

    Expert Comment

    I think the key here is going to be percentages and spacers.  Put a spacer at the top on the right that's 20px tall, then set the datagrid height to 100% (assuming the panel is set to vertical).  If it's set to absolute, then just set the constraints to 0 on all sides except the top, set that to 20px.  For the buttons on the left I'd just put a spacer between the list at the top and the buttons.  Or make your list height 100%.

    Author Comment

    Both worked like a charm.

    Only 1 question left, how can I add a little image into a datagrid?

    By the way, I really appreciate your help, I wish there was a way to give extra points.

    LVL 10

    Accepted Solution

    Not a problem, take a look at itemRenderers.  Basically it allows you to create a little component (in this case an image) and specify you want to use that to render a column.  A perfect example is here:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Suggested Solutions

    Title # Comments Views Activity
    RSS Feeds--IE 13 136
    RD Web 8 85
    Hybrid app to listen a radio 12 99
    Examples of Web API, REST web services and SOA 7 66
    Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now