PDA

View Full Version : how to show the loading message before the window is popup and also to hide it



rushi2440
17 Feb 2012, 1:26 AM
hi. . forum member I need you support.

I want to show the loading message or any loading image as soon as the button is clicked. and after the window popup comes perfectly the loading message should disappear again.

I tried to use the loadMask: 'true', but its of no use. It shows the loading message in the popup window itself and doesn't get disappear .

my main grid is shown as below image31823


when the user click on the edit actioncolumn I just popup the window. Window popup is correctly coming but I just want to show the loading image or message before the window popup comes

I just want loading message or loading image before the window popup opens and as soon as it opens the loading message or loading image should disappear itself.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
17 Feb 2012, 2:34 AM
You can use Ext.LoadMask.

Create and show mask.


var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();


Hide mask


myMask.hide()

rushi2440
19 Feb 2012, 9:37 PM
hi. vietits

thanks for your reply I tried your solution but the Please wait... message comes when the window loaded successfully. Means the loading message in shown on the new window and it doesn't get hide.

I am loading window with below code


projectEditTask: function(grid,cell,row,col,e) {
myMask.show();
console.log('VIEW TASK ACTION');
var win = this.getProjectGanttwindow();
win.show();
myMask.hide();


as soon as the grid is double click or the edit button is pressed my Mask should be visible for some time and when the window is shown Mask should disappear.

but don't know what's the reason the mask is not shown properly.


Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
19 Feb 2012, 11:28 PM
You should show the mask before showing the window and hide it when the window has been shown. For example:



projectEditTask: function(grid,cell,row,col,e) {
myMask.show();
console.log('VIEW TASK ACTION');
var win = this.getProjectGanttwindow();
win.on('show', function(){myMask.hide()}, {single: true});
win.show();

rushi2440
21 Feb 2012, 11:19 PM
@vietits

I tried your solution but don't know the loading message is not show on my browser screen. After some time the the window is loaded successfully.

But I want before the window gets loaded successfully the loading message should be shown for sometime the the window should come with fadeIn effect.

any other solution I can try to get the loading message ??

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
24 Feb 2012, 1:38 AM
Maybe your window is shown too quickly (its 'show' event fired) so you did not see the mask. Let try by show the mask but not show the window to check whether or not you see the mask.


projectEditTask: function(grid,cell,row,col,e) {
myMask.show();
console.log('VIEW TASK ACTION');
//var win = this.getProjectGanttwindow();
//win.on('show', function(){myMask.hide()}, {single: true});
//win.show();

rushi2440
24 Feb 2012, 1:47 AM
@vietits
yes vietits after commenting all the below lines the loadMask is shown correctly on the grid.


//var win = this.getProjectGanttwindow();
//win.on('show', function(){myMask.hide()}, {single: true});
//win.show();

But after uncommenting the above line the loadMask is not shown. My detail Window takes 20-25sec to load correctly. But the loading message is not show till that time.
So is there any way I can set the timeout of loadMask ?
So I can make my loadMask wait untill I want itto wait and shown as soon as the window is loaded correctly.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
24 Feb 2012, 2:24 AM
It's in fact the mask is showing. However, your window appears too quickly (I mean 'showing' not completely loading data) and hide the mask so you can't see it.

With your case, I think you should do the following:
1. Show the mask.
2. Load data without showing the window.
3. When the loading is complete, close the mask and show the window

rushi2440
24 Feb 2012, 2:50 AM
@vietits

on grid click I am executing the below code to loadMask and after the projectGanttWindow loaded successfully I am showing it and then I am trying to hide the loadMask


projectEditTask: function(grid,cell,row,col,e) {
myMask.show(); //loading the mask
var rec = grid.getStore().getAt(row);
var win = this.getProjectGanttwindow(); //loading window data
win.projectId = rec.get('id');
win.show(); //showing window

myMask().hide(); //hiding mask
}


my projectGanttWindow code is

Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window


initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];


me.callParent(arguments);

me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},

onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});

}
}
});

now what I had done wrong still the loading message is not shown before window gets loaded. Can you please tell me what else other changes do I need to make.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
24 Feb 2012, 8:59 PM
@rushi2440,
With your code, the loading data only happens when you call win.show(). Because of loading data is an asynchronous process so your window will be shown and the next line of code (myMask().hide()) will be executed. It means that while your data is loading from server, your window has been shown and your mask has been hidden.


projectEditTask: function(grid,cell,row,col,e) {
myMask.show(); //loading the mask
var rec = grid.getStore().getAt(row);
var win = this.getProjectGanttwindow(); //loading window data
win.projectId = rec.get('id');
win.show(); //showing window <- asynchronous data loading only start here in the beforeshow event of window (see projectGanttwindow), window is shown.
myMask().hide(); //hiding mask <- this is executed long before data loading completes.
}

With your current coding, it difficult to do what I suggest in previous post because the loading only starts when calling win.show(). To solve this, you must modify your code to allow loading data before calling win.show().

Other solution is using mask() and unmask() to show mask when window is shown and hide it when data loading is complete.