View Full Version : My first layout - a few issues / questions

2 Feb 2008, 3:36 PM
Hello all -

after some time with jQuery recently, and with ext 1.0 via ColdFusion 8 tags, I have decided to take the plunge into directly learning Ext 2, with the goal of using it for super-slick wrappers on my CF cms and other db-driven applications' "admin" sections.

Very very small steps at first ... I started by taking an example layout, and tweaking it to see how things work. So far so good... mostly


Any advice available for an ext-newcomer would be greatly appreciated...

1) Working in FireFox, it looks pretty good... but in IE7, its totally broken - no errors I can see, just ... no layout. No doubt a syntax error somewhere... but where to start?

2) In FF ... I applied some padding to each of the regions, just to check out the options, and I kinda like the spacing between the boxes. But... on first load, some of the content that belongs *in* the left pane is visible in the top left of the page... then when the left side tabs are clicked, the content jumps down where it should be.

3) If the right panel splitter is dragged full left, the right-most tabs in the center panel end up going behind the right panel. What is the config option for the tabs to that they can be scrolled or selected some other way if hidden under a side region?

Thanks in advance, looking forward to learning and loving Ext!

2 Feb 2008, 11:30 PM
1) Yep, you have an extra comma (at least one). The first one I can see is after 'margins' in the north panel.

2) This is probably happening because the body of the tabs don't get rendered until they are activated. As such, the divs will just stay in their normal spot until you click the tab. Try setting the style on your contentEl items to be hidden, then when the tabs activate, change their style to be visible.

3) There is enableTabScroll (http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=enableTabScroll) but I don't really know how well it will work dynamically.

4 Feb 2008, 3:04 AM
Evant -
thanks so much, perfect on all counts.

#1 aha! I coulda looked at that for hours and not seen those little buggers

#2 was super easy - just put all that content in a named div, and set a display:none style for all ul in that div. When the tab panels call in the content, it is no longer in that named div, and becomes visible. Slick!

#3 working great