6 Jul 2012 2:16 AM #1
Card layout - form panels with anchor layout
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?
18 Jul 2012 6:07 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
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 @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
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 email@example.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.