[solved] BasicDialog always the wrong size

[artythesmarty]

On this page I'm working on, http://www.matthewleichty.com/new.aspx, click on Portfolio, then click on Web Developer. According to the documentation the BasicDialog always constrains to the viewport, yet no matter what, it is ALWAYS slightly too large, (unless I set a smaller size than the viewport, of course). I want the BasicDialog to always match the height of the viewport. How do I do this? For that matter, why is it always slightly too big?

EDIT: Also, fixedcenter does not work as an option in this scenario for whatever reason. syncHeightBeforeShow, constraintoviewport, these options do not seem to work.

[brian.moeskau]

I'm not sure why you're considering this a bug in Ext at this point? What is the actual bug that you're pointing out?

I looked at your page, and maybe I'm not clear on what you're saying, but the dialog always seems to have a fixed size for me and is centered correctly. According to Firebug, the dialog style includes: "width: 600px; height: 800px;" and that never changes. :-/

[artythesmarty]

Maybe I'm just confused about this line in the documentation:


constraintoviewport : Boolean BasicDialog
True to keep the dialog constrained within the visible viewport boundaries (defaults to true)

I would understand that to mean that by default, the BasicDialog would always constrain height and width to the viewable viewport. So if I set a larger height, I would expect it to apply this config option and constrain that height so the dialog does not leave the page. Am I misinterpreting this?

[artythesmarty]

Maybe I should just cut to the real question, which is, if this is the expected behavior and not a bug, how do I keep the dialog height to always be the same as the viewport height?

[brian.moeskau]

So if I set a larger height, I would expect it to apply this config option and constrain that height so the dialog does not leave the page. Am I misinterpreting this?

Yes ;). constrainToViewport does not touch height or width -- it simply prevents you from positioning or dragging an element out of the viewport (constrains top and left). If the constrained element is bigger than the viewport already, then it can't fix that.

To do what you want with a dialog, you'd have to monitor the window resize event and resize your dialog accordingly. Layouts will monitor this for you automatically, but the dialog is not built for that so you have to do it yourself. For example:



Ext.EventManager.onWindowResize(function(w, h){
Ext.Msg.alert('Resize', 'Viewport w = '+w+', h = '+h);
// resize your dialog el to w,h
}, this);


You may have to adjust for the dialog shadow dimensions if you are using shadows.

[artythesmarty]

Okay, I've been trying for hours and I give up.

How do you resize a dialog?

If I use setHeight on the dialog el, then it crops the dialog but doesn't resize it. (Crops off buttons, doesn't resize shadow, etc.)

[mystix]

http://extjs.com/deploy/ext/docs/output/Ext.BasicDialog.html#config-height
http://extjs.com/deploy/ext/docs/output/Ext.BasicDialog.html#config-width

[edit]
that's for setting the dialog's width / height at setup time

[mystix]

http://extjs.com/deploy/ext/docs/output/Ext.BasicDialog.html#resizeTo

[edit]
that's for resizing an existing dialog

[artythesmarty]

Crap, how did I possibly miss that? My bad.

[mystix]

Crap, how did I possibly miss that? My bad.

~o)~o)~o)