PDA

View Full Version : [CLOSED][3.0RC3] Ext.MessageBox.wait



mschwartz
2 Jul 2009, 6:43 AM
You guys gotta love me.

See attached, the busy box is now all of a sudden really tall.

(and I've removed every override in my overrides file).

mschwartz
2 Jul 2009, 6:45 AM
Not just wait, but confirm() and prompt(), too.

aconran
2 Jul 2009, 6:54 AM
Please provide a code sample and let us know what browser you are using. I just tested our example in multiple environments and it worked fine.

http://extjs.com/deploy/ext-3.0-rc3/examples/message-box/msg-box.html

mschwartz
2 Jul 2009, 7:03 AM
FF 3.5, Windows XP
Just switched to RC3 from RC1.1

THIS DOES NOT REPRODUCE IT

Still looking to make a minimal test case.

(I use these MessageBox things all over the place with complex layouts, tab panels, grids, etc.)




<html>
<head><title>test</title>
<!--
<link rel="stylesheet" type="text/css" href="extui/frameworks/ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extui/frameworks/ext-2.2/examples/multiselect/multiselect.css" />
<script type="text/javascript" src="extui/frameworks/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="extui/frameworks/ext-2.2/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="extui/frameworks/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extui/frameworks/ext-2.2/ext-all-debug.js"></script>
-->
<link rel="stylesheet" type="text/css" href="extui/frameworks/ext-3.0-rc3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extui/frameworks/extensions/multiselect/multiselect.css" />
<script type="text/javascript" src="extui/frameworks/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="extui/frameworks/ext-3.0-rc3/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="extui/frameworks/ext-3.0-rc3/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout: 'fit',
items: [
{
title: 'Test',
tbar: new Ext.Toolbar({
items: [
{
text: 'click me',
handler: function() {
Ext.MessageBox.prompt('Title', 'Enter something', function(btn, text) {
alert('button: ' + btn + ' text: ' + text);
});
}
}
]
})
}
]
});
});

</script>
</body>
</html>

mschwartz
2 Jul 2009, 7:06 AM
It's not my CSS, I added that to the test code above.

aconran
2 Jul 2009, 7:09 AM
Alright, let us know when you are able to create a testcase.

Thanks,

mschwartz
2 Jul 2009, 7:18 AM
Inspecting the prompt dialog with firebug, there's a visibility: hidden textarea below the text field.

Same for the busy box (which also has a hidden text field).

I don't think it should be using visibility: hidden, but display: none.

mschwartz
2 Jul 2009, 7:19 AM
Sure enough, in the test case I posted, I examine the dialog and the textarea is indeed display: none, not visibility: hidden.

aconran
2 Jul 2009, 7:22 AM
Does it happen when using ext-base?

mschwartz
2 Jul 2009, 7:27 AM
Well, the test case is using jquery and jquery adapter and it works right.

I don't remember messing with any visibility settings in my code. But I'm looking :)

aconran
2 Jul 2009, 7:30 AM
hrmmmm maybe you changed the visibility on the flyweight element mistakenly?

mschwartz
2 Jul 2009, 7:30 AM
Also, there's a ext-all-debug.js~ file in the ext-3.0-rc3.zip.

Emacs LOL

Vim r00lz, ask Saki!

mschwartz
2 Jul 2009, 7:32 AM
hrmmmm maybe you changed the visibility on the flyweight element mistakenly?

I have never had the need to use flyweight elements.

One clue at this scene of the crime is... It worked fine with RC2 and RC1.1, so it's something changed in RC3. Not that it's a bug, until we understand why.

Animal
2 Jul 2009, 7:48 AM
You will have to debug until you have a test case that others can debug.

Set a breakpoint in the show method, and step through.

The window should be autoHeight: true shouldn't it? Some code somewhere is setting the height.

aconran
2 Jul 2009, 7:49 AM
My guess is there is a faulty enableVisibilityMode() on a flyweight.

mschwartz
2 Jul 2009, 7:54 AM
It's a generic use of Ext.MessageBox.progress():



var msg = Ext.MessageBox.progress('test', 'busy');
// do things
msg.hide();
msg = null;


I'll debug into the progress() method and see what it tells me.

mschwartz
2 Jul 2009, 8:10 AM
haha

it's in henricd's miframe

"this" is the textfield element, and the bolded code is being executed.

Not sure his code is wrong or not, as the textfield element should be visibilityMode == Ext.Element.DISPLAY, right?



/* override adds a third visibility feature to Ext.Element:
* Now an elements' visibility may be handled by application of a custom (hiding) CSS className.
* The class is removed to make the Element visible again
*/

Ext.apply(Ext.Element.prototype, {
setVisible: function(visible, animate) {
if (!animate || !Ext.lib.Anim) {
if (this.visibilityMode == Ext.Element.DISPLAY) {
this.setDisplayed(visible);
} else if (this.visibilityMode == Ext.Element.VISIBILITY) {
this.fixDisplay();
this.dom.style.visibility = visible ? "visible": "hidden";
} else {
this[visible ? 'removeClass': 'addClass'](String(this.visibilityMode));
}

} else {
// closure for composites
var dom = this.dom;
var visMode = this.visibilityMode;

if (visible) {
this.setOpacity(.01);
this.setVisible(true);
}
this.anim({
opacity: {
to: (visible ? 1 : 0)
}
},
this.preanim(arguments, 1), null, .35, 'easeIn',
function() {

if (!visible) {
if (visMode == Ext.Element.DISPLAY) {
dom.style.display = "none";
} else if (visMode == Ext.Element.VISIBILITY) {
dom.style.visibility = "hidden";
} else {
Ext.get(dom).addClass(String(visMode));
}
Ext.get(dom).setOpacity(1);
}
});
}
return this;
},
/**
* Checks whether the element is currently visible using both visibility and display properties.
* @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible: function(deep) {
var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none" || this.hasClass(this.visibilityMode));
if (deep !== true || !vis) {
return vis;
}
var p = this.dom.parentNode;
while (p && p.tagName.toLowerCase() != "body") {
if (!Ext.fly(p, '_isVisible').isVisible()) {
return false;
}
p = p.parentNode;
}
return true;
}
});

mschwartz
2 Jul 2009, 8:19 AM
if (!animate || !Ext.lib.Anim) {
if (this.visibilityMode == Ext.Element.DISPLAY) {
this.setDisplayed(visible);
} else if (this.visibilityMode == Ext.Element.VISIBILITY) {
this.fixDisplay();
this.dom.style.visibility = visible ? "visible": "hidden";
} else {
this[visible ? 'removeClass': 'addClass'](String(this.visibilityMode));
}

}

All this begs the question of why the red code executed under RC1 through RC2. Was something in RC3 to do with visibilityMode changed for some reason?

evant
2 Jul 2009, 8:25 AM
Because there were issues where flyweights weren't able to keep track of their internal state because they were being kept inside the object.

hendricd
2 Jul 2009, 8:27 AM
if (!animate || !Ext.lib.Anim) {
if (this.visibilityMode == Ext.Element.DISPLAY) {
this.setDisplayed(visible);
} else if (this.visibilityMode == Ext.Element.VISIBILITY) {
this.fixDisplay();
this.dom.style.visibility = visible ? "visible": "hidden";
} else {
this[visible ? 'removeClass': 'addClass'](String(this.visibilityMode));
}

}All this begs the question of why the red code executed under RC1 through RC2. Was something in RC3 to do with visibilityMode changed for some reason?

@mschwartz -- I didn't see you load any ux's in your markup, which of mine were you loading?
The uxvismode plugin is what I'm seeing above. I'll amend it shortly to handle the diferences between 3 RC2 and RC3. ;)

And, yes, RC3 made some significant changes internally to cache certain style properties (per Element).

hendricd
2 Jul 2009, 8:31 AM
@mschwartz -- All you need is the latest uxvismode (http://uxdocs.theactivegroup.com/repo/trunk/Ext/ux/plugin/uxvismode.js). It's 2.x, 3.RCx compat. ;)

mschwartz
2 Jul 2009, 8:39 AM
That code is inside miframe-src.js

What do I really need? And if I get a newer miframe, is the API going to be hugely different?

I have a LOT of iframes going on in my app...

evant
2 Jul 2009, 8:41 AM
Marking this as closed.

mschwartz
2 Jul 2009, 8:43 AM
I commented out that code in miframe.js and everything seems to work properly.

Weird?

hendricd
2 Jul 2009, 8:50 AM
I commented out that code in miframe.js and everything seems to work properly.

Weird?

MIF 2.0 RC2 was uploaded last-night (to coincide with Ext 3 RC3) ;)