PDA

View Full Version : [INFOREQ] [Ext 4.2.5] LoadingMask and Ext.tab.Panel



xavier.folch
8 Jul 2016, 4:59 AM
Hi,

I am migrating my application from Ext 4.2.2 to Ext 4.2.5.

I noticed that the loading masks are not anymore working on the Ext.tab.Panel elements. Other elements such as combobox are working fine.

When consulting the DOM in Chrome, the mask seems to be set below its parent (like in a vertical grid). When changing the x and y position in the CSS editor to position the mask somewhere visible, the mask is correctly set and animated.

Any ideas what may cause this bug on Ext 4.2.5 ?

Here is an extract of my code. It is working on Ext 4.2.2 :

Definition of my Ext.tab.Panel :
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.tab.Panel',
alias: 'widget.mycomponentpanel',

//items will be added by the controller at runtime
});

Render of this component in my controller :
Ext.define('MyApp.controller.MyComponent', {
extend: 'Ext.app.Controller',

views: ['MyComponent'],

init: function () {
this.control({
'mycomponent': {
render: function (cmp) {

var mask = cmp.setLoading(true);
mask.show();

MyApp.model.MyModel.load(idC, {
params: {
id: 1
},
scope: this,
success: function (record) {

this.createInterface(record); //add tabs function of data
mask.hide();
},
failure: function (record) {
Ext.Msg.show({
title: 'Data not found',
msg: 'The data with the id ' + id + ' was not found !',
buttons: Ext.Msg.OK,
fn: function (btn) {},
animEl: 'elId',
icon: Ext.MessageBox.ERROR
});

mask.hide();
}
});
}
}
});
[....]

Gary Schlosberg
8 Jul 2016, 7:53 AM
Thanks for the report. I haven't heard of this issue. Can you please post a test case which reproduces the behavior?
https://fiddle.sencha.com/#home

xavier.folch
11 Jul 2016, 12:04 AM
Hi,

I managed a simple test code close enough to my real application.
I created a viewport. This viewport has a panel with a border layout.
This panel has a tab panel. On this tab panel, I set a Loading mask (normally used when loading data from the server).

- On Fiddle with Ext 4.2.1 => everything is fine
- On my machine with Ext 4.2.5 => the mask and loading panel are placed below the tab panel component)



Ext.application({
name: 'Test',
appFolder: '/assets/app',

launch: function () {

var viewport = new Ext.container.Viewport({});


var panel = new Ext.panel.Panel({
title: 'panel',
height: 500,
layout: 'border',
items: [{
region: 'west',
xtype: 'panel',
title: 'West'
},
{
region: 'center',
xtype: 'tabpanel',
height: 200,
title: 'tab panel'
}]
});

viewport.add(panel);

var tabPanel = viewport.query('tabpanel')[0];

var myMask = tabPanel.setLoading(true);
myMask.show();
}
});

xavier.folch
11 Jul 2016, 1:15 AM
Hi,

I met another problem when upgrading to 4.2.5 linked to the mask.

The problem has already been submitted to Sencha for Ext 4.2.3 :
https://www.sencha.com/forum/showthread.php?291412-Error-after-upgrade-to-ExtJS-4.2.3&p=1139568#post1139568

xavier.folch
18 Jul 2016, 12:03 AM
Hi,

Here is the fiddle for the test case :
https://fiddle.sencha.com/#fiddle/1dq1




Ext version tested:

Ext 4.2.5 rev 1763
[LIST]
Browser versions tested against:
[LIST]
Chrome 51.0.2704.103 m

DOCTYPE tested against:

____

Description:

I am migrating my application from Ext 4.2.2 to Ext 4.2.5.
I noticed that the loading masks are not anymore working on the Ext.tab.Panel elements. Other elements such as combobox are working fine.
When consulting the DOM in Chrome, the mask seems to be set below its parent (like in a vertical grid). When changing the x and y position in the CSS editor to position the mask somewhere visible, the mask is correctly set and animated.

Steps to reproduce the problem:

Run the test code in the fiddle with a 4.2.5 environment

The result that was expected:

The dark mask's layer should appear over the rendered tab panel
The mask with the text "Loading..." should appear over the mask's layer

The result that occurs instead:


The dark mask's layer does not appear over the rendered tab panel.
The mask with the text "Loading..." does not appear as well
However the mask elements are set in the DOM.
Their positions are below the rendered panel instead of to be over the panel

xavier.folch
24 Jul 2016, 11:10 PM
Good day,

I did not have any feedback if the additional information are enough for Sencha to reference this issue and to work on a fix.

Please let me know if you need additional information

Sincerely

Gary Schlosberg
9 Aug 2016, 8:38 AM
If this is the same issue as EXTJS-15054 (from the link you posted) then you do not need to provide any further information. Thank you very much for all of your help.