PDA

View Full Version : [OPEN] [4.2.0 beta] GridPanel in Window: loading mask doesn't move with Window



Daniil
31 Dec 2012, 6:03 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.2.0 beta

Browser versions tested against:

Chrome
FireFox
IE9

DOCTYPE tested against:

<!DOCTYPE html>

Description:

If a GridPanel in a Window when its loading mask is not moved with the Window.
Another similar (I think) problem with a MultiSelect. A mask just disappears if drag or resize a Window. If you think it might be another issue and/or you can't reproduce, please tell. I will try to prepare a sample.

Steps to reproduce the problem:

Press the Button
Drag the Window

The result that was expected:

The mask moves with the Window

The result that occurs instead:

The mask is not moved

Test Case:

Just a minimum to reproduce. In a real case it is a Store with a remote proxy which takes some time to load.


<!DOCTYPE html>
<html>
<head>
<title>LoadMask problem</title>

<link rel="stylesheet" href="../resources/css/ext-all.css" />

<script src="../ext-all-debug.js"></script>

<script>
Ext.onReady(function () {
Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
width: 500,
height: 500,
modal: true,
layout: "fit",
items: [{
xtype: "grid",
id: "GridPanel1",
store: {
fields: [{
name: "text"
}]
},
columns: {
items: [{
dataIndex: "test",
text: "Test"
}]
}
}],
buttons: [{
text: "Mask",
handler: function () {
Ext.getCmp("GridPanel1").getView().loadMask.show();
}
}]
}).show();
});
</script>
</head>
<body>

</body>
</html>


HELPFUL INFORMATION

Screenshot :

How it looks:

41016

mitchellsimoens
31 Dec 2012, 7:03 AM
Thanks for the report! I have opened a bug in our bug tracker.

wolcott
6 Mar 2013, 9:42 AM
Any further thoughts about this issue?

gantbd
17 Apr 2013, 10:01 AM
Also hoping for an update.

gantbd
22 Apr 2013, 5:57 AM
Bump?

Akatum
6 Jun 2013, 11:31 AM
Any news about this bug?
This bug should have higher priority. It is quite a big problem when you have application with floating windows.

wmcnamara
20 Sep 2013, 8:41 AM
Just another bump, ran into this issue today as well. Was wondering if theres been any progress on fixing it.

Daniil
24 Sep 2013, 2:18 AM
As far it is kind of a popular problem, I did some investigation.

All "floatingDescendants" should be hidden while dragging. A LoadMask is floating one. After dragging it should be shown. This job is done within a Panel's beginDrag and endDrag.
http://docs.sencha.com/extjs/4.2.1/source/Panel6.html#Ext-panel-Panel-method-beginDrag
http://docs.sencha.com/extjs/4.2.1/source/Panel6.html#Ext-panel-Panel-method-endDrag

A floatingDescendants thing is a Ext.ZIndexManager instance.

So, its show and hide methods can be found here.
http://docs.sencha.com/extjs/4.2.1/source/ZIndexManager.html#Ext-ZIndexManager

Well, the existing logic is not enough to handle the LoadMask case correctly. It hides a component's el, but it doesn't hide a mask itself. By the way, if someone (probably, for the Sencha team) can clarify why it was decided to do it this way:

if (comp.isVisible()) {
this.tempHidden.push(comp);
comp.el.hide();
comp.hidden = true;
}
instead of

if (comp.isVisible()) {
this.hide();
}
or, maybe, just


comp.hide();

I would appreciate.

End of all, a possible fix is:

Possible Fix

Ext.ZIndexManager.override({
hide: function() {
var i = 0,
stack = this.zIndexStack,
len = stack.length,
comp;

this.tempHidden = [];
for (; i < len; i++) {
comp = stack[i];

if (comp.isVisible()) {
this.tempHidden.push(comp);

if (comp instanceof Ext.LoadMask) {
comp.hide();
} else {
comp.el.hide();
if (comp.getMaskEl) {
comp.getMaskEl().hide();
}

comp.hidden = true;
}
}
}
},

show: function() {
var i = 0,
tempHidden = this.tempHidden,
len = tempHidden ? tempHidden.length : 0,
comp;

for (; i < len; i++) {
comp = tempHidden[i];

if (comp instanceof Ext.LoadMask) {
comp.show();
} else {
comp.el.show();
comp.hidden = false;
comp.setPosition(comp.x, comp.y);
}
}
delete this.tempHidden;
}
});

hpet
20 Feb 2014, 6:28 AM
Extjs 4.2.1 - this could be related to mask not adjusting itself when browser is resized:
Example: Basic grid with remote data using autoLoad... LoadMask appears and dissapires as expected - at this point mask is still present in DOM but hidden. When browser window is resized (shrinken) mask object doesn't adjust, causing browser scrolling.
This is kind of a big deal so I am rather disapointed that noone from development team responds with any update information on the issue.