PDA

View Full Version : Load Mask not working



wattyf
27 Apr 2011, 4:01 AM
Hi,

I have a loadmask implemented for a window awaiting data.
On my application interface, a user selects some options and executes a query using a button.
In FF the window pops up immediately with the loadmask showing until data are returned from a database. In Chrome and IE however, the window does not pop up on clicking the execute button... the window only pops up when the data are returned, i.e. no loadmask appears in IE or Chrome.

//Here's my code for the ext.window.

function dispDataTable(){
var title = "Output Results for " + studyareaname;

var dataTableWin = new Ext.Window({
width: 900,
height: 500,
id: "display-table-data-window",
title: title,
listeners: {
show: function(){
dataTableWin.lm = new Ext.LoadMask(dataTableWin.getEl(),
{
msg: "Loading. Please wait...",
id: "lm"
}
);
dataTableWin.lm.show();
}
}
});
dataTableWin.show();
}
//this function is called immediately after the execute query button is selected...

var ex_button = Ext.get("execute-button");
ex_button.on('click', function(){

disDataTable();
getTableData();

});

//getTableData() checks ext components and queries the database and add the results to the //dataTableWin.
//This works fine for FF, but loadmask does not appear in Chrome or IE. Output results are the same as //FF however.

Any help would be much appreciated.
Cheers.

wattyf
26 May 2011, 1:45 AM
Resolved.

snoekie
26 May 2011, 4:21 AM
Maybe you could post how you resolved it so other people that encounter this problem can find a solution when they stumble upon your post :)

wattyf
18 Jul 2011, 6:06 AM
Apologies, this issue was not resolved. I accidently posted on the wrong thread.
Checked backed to view any replies. Will repost.

aramaki
18 Jul 2011, 7:06 AM
could you, pls, post code in "[PHP]" or "[CODE]" tags

wattyf
18 Jul 2011, 7:23 AM
Sorry all. thanks aramaki.
See initial post reformatted below.

&&&&


Hi,

I have a loadmask implemented for a window awaiting data.
On my application interface, a user selects some options and executes a query using a submit button.
In FF the window pops up immediately with the loadmask showing until data are returned from the database. In Chrome and IE however, the window does not pop up on clicking the execute button... the window only pops up when the data are returned, i.e. no loadmask appears in IE or Chrome.

Here's the code that displays the ext.window.



function dispDataTable(){
var title = "Output Results for " + studyareaname;

var dataTableWin = new Ext.Window({
width: 900,
height: 500,
id: "display-table-data-window",
title: title,
listeners: {
show: function(){
dataTableWin.lm = new Ext.LoadMask(dataTableWin.getEl(),
{
msg: "Loading. Please wait...",
id: "lm"
}
);
dataTableWin.lm.show();
}
}
});
dataTableWin.show();
}
this function is called immediately after the execute submit button is clicked...



var ex_button = Ext.get("execute-button");
ex_button.on('click', function(){

disDataTable();
getTableData();

});
getTableData() checks ext components, queries the database and add the results to the dataTableWin. This works fine in FF, but loadmask does not appear in Chrome or IE. Output results are the same as FF however.

Any help would be much appreciated.
Cheers.

aramaki
18 Jul 2011, 7:47 AM
what is the
dataTableWin.getEl()
in FF and Chrome, are similar?

wattyf
18 Jul 2011, 8:09 AM
it's the element that the loadmask is to be applied to. I'm applying the loadmask to a pop-up window.

the loadmask works correctly in FF but not in Chrome or IE.

In FF, while waiting for data to be returned from the database the window (dataTableWin) pops up and the loadmask is shown, when the data are returned, the data is displayed and the loadmask is hidden.

In Chrome and IE however, the window does not popup until the data are returned, which results in the loadmask never being shown.

Any ideas?
Cheers.

aramaki
18 Jul 2011, 8:20 AM
could you, pls, post

console.log(dataTableWin.getEl())
in both cases

wattyf
18 Jul 2011, 8:43 AM
What in particular would you like me to post from the console log, there is an amount of information there. ..

and by 'in both cases'.. i assume you mean for Chrome and IE?

aramaki
18 Jul 2011, 10:12 AM
just check, that this is the similar Ext.Element. (in case FF and Chrome)

another question is you call 2 functions

dispDataTable();
getTableData();

but explain just dispDataTable(), getTableData() put some html into window? how? where is window items?

wattyf
19 Jul 2011, 1:09 AM
I pass items to the window using the getTableData() function.
Depending on user input, a different number of tables are returned from a database, getTableData() identifies all the tables returned from the database and loops through creating an Ext.TabPanel for each database table. It adds each tab panel to tabPanelItems.



function getTableData(){
.
.
.
.
//OTHER CODE HERE
.
.
.
.

var tab_panel = new Ext.TabPanel({
region: "center",
id: "gp_tab_2006",
activeTab: 0,
enableTabScroll: true,
items: [tab_panel_items]
});


dataTableWin.add({
items: [tab_panel],
frame: true
});

tab_panel_items.length = 0;
//empty the html store
$("#temp").empty();
//turn off loading mask
dataTableWin.lm.hide();
};

In chrome, console.log(dataTableWin.getEl()) returns "undefined"

In FF, an amount of information is returned.

.getEl() returns an Ext.Element

aramaki
19 Jul 2011, 1:12 AM
In chrome, console.log(dataTableWin.getEl()) returns "undefined"

In FF, an amount of information is returned.

.getEl() returns an Ext.Element

exactly, there are different execution time in ff and chrome of your code, in chrome ,mask does not know for which element to apply.

let`s investigate your code and find bug..

wattyf
19 Jul 2011, 1:17 AM
from Chrome,


console.log(dataTableWin.getEl())

returns


Ext.Layer
constrain: false
dom: HTMLDivElement
id: "display-table-data-window"
lastLT: Array[2]
shadow: Ext.Shadow
shadowDisabled: false
shadowOffset: undefined
updateManager: constructor
useDisplay: undefined
useShim: false
visible: true
zindex: 9001
__proto__: Ext.apply.extend.G
undefined

wattyf
22 Jul 2011, 4:55 AM
Anyone have any suggestions on this? Still stumped..

Cheers.