PDA

View Full Version : 1px ext render diff in IE/css workaround?



smokeman
22 Apr 2010, 6:26 AM
http://outside.arklegaudit.gov

notice, on the bottom of the page, where the footer starts a 1px, maybe 2px space between where the body stops, and the footer starts.

this is a column layout, and I can find no way to fix it in the ext definitions, and was wondering what I could do to work around it in css?

any suggestions?

Animal
22 Apr 2010, 6:44 AM
Ext.getBody().select("div.x-clear").remove()


That bodges it for me, but jeeehayzus! What on earth is that DOM structure all about? Panels in Panels in Panels in Panels in Panels in Panels in Panels...

All for just a "web page"?

You need to go back to first principles.

smokeman
22 Apr 2010, 6:57 AM
yes, my attempt at using ext to totally manage the entire website's layout, without using renderto's, etc..
seems to work well :)

my first site actually used css to layout the page, and had a bunch of quirks here and there, especially cross browser.
this way, I'm using ext to deal with those cross browser quirks...at least that was the theory....there always seems to be something like this div.x-clear pop up though.
thanks a ton for the quick tip!

Animal
22 Apr 2010, 7:09 AM
But you have Panels in Panels in Panels in Panels in Panels in Panels in Panels!

It's terrible.

For a start, only use a Panel if you need a Panel. That is if you need borders, toolbars, header, header tools, footer ect.

If all you need is containment and arrangement of nested Components then use an Ext.Container!

Also, just use a few as possible in as shallow a nesting as possible.

Your navigation column is a Panel which contains a Panel which contains a Panel which contains the actual 4 items which stack up to make the navigation. (Which themselves are Panels when they don't need to be)

The navigation column should just be a Container which contains the 4 items which stack up to make up the navigation items.

smokeman
22 Apr 2010, 7:22 AM
ahh, so I just need to add some xtype:'container'
thanks for the suggestions,
I'll look at my code again to see if I can fix some of the overnesting

smokeman
22 Apr 2010, 7:42 AM
another couple of questions on this topic:
so, panels, inside panels is bad, unless you need all of a panels components, like title, etc...
shouldn't the default type for ext, then be an ext.Container?
on a cardlayout, where I define an items:[], for each item, I need an xtype:'container'
just seems like ext should default to the best choice for child items.

Animal
22 Apr 2010, 7:45 AM
defaultType is a config option of Container...

smokeman
22 Apr 2010, 8:06 AM
you are exactly right, of course...
and an example is shown right in the api docs for Container, using the defaults: config, and xtype:

I started learning from the docs, which state that panel is the workhorse to use for 90%
here:http://www.extjs.com/learn/Ext_2_Overview#Container_Model, but why render all the parts of a panel if you don't need them....

smokeman
22 Apr 2010, 8:09 AM
nevermind....I didn't drink enough coffee yet...
I'm debating defaults on a framework built for gui, yet I'm using it for a webpage...so of course I'm going to have to think differently...