1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    PratoJaVa is on a distinguished road

      0  

    Default Card layout - form panels with anchor layout

    Card layout - form panels with anchor layout


    Hi all,

    I'm having trouble with design a wizard-like window.

    The issue is this:
    In previous windows, I've used an Anchor-layout, filled with an HBox container, filled with a number of new Anchor layout containers for each column. So when I add controls like textboxes and button etc, i'd never had to set any heights, it all arranged nice and automatically.

    Now i have a windows set to card layout, and each card is a form panel with an anchor layout. I try to recreate the steps noted above, by adding an Hbox container on my anchored form panel, then add new anchored container for creating columns and i add my controls to those.. But here the height doesn't get set automatically so I see nothing.

    Moreover, when i set a height to the Hbox, the controls look bad (i have a textbox in column 1 and a button in column 2)... The textbox seems to have margins, but the button doesnt so a height of 20 shows a button that has more height than the textbox..

    Any ideas what's causing this?
    I don't see any difference between my previous way of working, except for the card layout on my window.. Is there a solution?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    hbox layout doesn't support auto-heighting so you need to give it a height. Each field within an hbox layout should be shown correctly however. Testing this out I added a form panel and a container to that form panel using hbox layout and gave it a height of 200. I then added a field to the container and remove the value from the flex config on that field. It still stretched and this is where a little knowledge of the framework is needed. On the container that has the hbox layout, it has align config set to stretch which is causing the field to have a tall height, remove that and you should be seeing something more of what you maybe expect.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1