There are a few things that are bugs in the designer:
First, It's not escaping quotes properly. Second, it's placing xtypes on GridColumns within an EditorGrid. Third, there seems to be a bug where docking a toolbar to 'bbar' or 'fbar' does not render in the canvas properly.
So the good news is we can fix these issues pretty quickly.
I cleaned up a lot of the overnesting in your original file and I've attached your xds file with some optimizations.
We plan on pushing out a new update tomorrow and we'll give it another shot. Thanks again for the example.
We've made some changes to the layout configs. We noticed there were a lot of "auto" layouts set. You'll see in this new version that we have made use of fit, vbox and hbox, and using flex to size the child containers. We've removed any heights that might have presented an issue when resizing the window. I'm interested in your feedback.
Currently, none of the grids have stores bound to them. This causes issues with the UI in the export mockup and in the preview.
The code generation should now be valid (we fixed the issues in the posts above). Please make sure you update to the new version.
Thanks Abe! This is great. I downloaded the new version and everything looks great. Was the layout config in one of the components causing the preview to clip the top part of the UI? I downloaded the update last night and the preview was showing again but the top part of the UI was clipped off. Is there a resource on your site that explains the layouts?
To be honest with you, my company just started using EXT to re-design one of our web apps so we are still trying to learn the in's and out's of all of the layouts and components. I was basically just doing anything that worked for layout. :-) I am also not a developer. I'm responsible for drafting business requirements and creating mock-ups to accompany PRD documents which are delivered to developers. This tool has been a welcome change as before I was just referencing URL's to your samples and demos web page in my PRD. Now I can actually deliver mock-ups along with requirements. Also, if using the proper layouts and binding to a data store will help deliver clean code thus reducing our dev time, I'm all for it. Like I said, I'm still just trying to learn the tool.
Thanks again for your help. You guys really hit the mark on this tool. Looking forward to future enhancements.
Here's a very quick overview of Ext layouts that should help get you using the designer more productively.
Layouts help layout child items. I usually find myself using just a few of the layouts - Fit, HBox, VBox, Form and Accordion. As a rule of thumb, I'd avoid "auto" (our current default) as it leaves it to the browser to layout items. In addition, you'll find that Forms uses a FormLayout (inherits from anchor), and Tabs use card layouts.
For your example:
MyWindow uses a Fit layout so that Mytabs take up the entire container.
Session Information uses Hbox with strechmax and a flex of 1 on each container instead of a Column Layout.
Hosts we leverage VBox to maintain a fixed ratio (2:1) between the two grid panels (Available vs Currently Assigned).
Abstracts we repeat similar concepts noted above.
The important thing to take away from this is that layouts affect their children. Children gain configurations (like flex, anchor and activeItem) and therefore functionality when their parents are of a certain type of layout.