PDA

View Full Version : Message Box Displayed behind Window, instead of on top



gskluzacek
23 Nov 2010, 5:07 PM
in my data grid I have a listener set on the RowSelectionModel beforerowselect event that checks to see if there are any unsaved changes in the form before selecting a new row and if there are a message box is displayed and the selection of the new row is canceled.

However the issue is that the Message Box is displayed behind the window instead of on top of the window.

I have posted a short video demonstrating the issue: http://www.youtube.com/watch?v=sYY_5lZrSis

Condor
24 Nov 2010, 1:21 AM
The z-index of the MessageBox is determined by the WindowMgr. If your own window is also managed by the WindowMgr, then it should already get a higher z-index.

If you are using your own WindowGroup, then you have to make sure to use a lower zseed then WindowMgr is using.

gskluzacek
24 Nov 2010, 10:57 AM
Condor,

Thanks for the tip! I took a look at the WindowMgr & WindowGroup classes and saw the config for zseed, and I also looked at the Window class and saw the config for manager. But I'm not setting any of theses in my code and additionally I'm using the default WindowMgr (actually using designer and I checked out the class files it generated and there were also no settings for those configs).

So I'm confused as to why the MessageBox would be appearing behind the one and only window I'm displaying.

Real quickly...

I've got one main Window object with a border layout, which contains, at the top level, a GridPanel in the north region and a FormPanel in the center region. The GridPanel and the FormPanel both have a Toolbar in the fbar position with some buttons.

The GridPanel is using a JsonStore which is set to auto load and there is a listener set for the store's load event, which selects the first row in the GridPanel.

When you click on a row in the GridPanel the record is loaded into the FormPanel. As I said above have a listener set on the GridPanel's RowSelectionModel's beforerowselect event that checks if the form is dirty, if so it displays a MessageBox alert and returns false to stop the changing of the selected row...

Here's the pertinent code created by Designer (xds_index.js, LocationsWindow.ui.js & LocationsStore.js) and my one file containing code, LocationsWindow.js.

Hopefully there is something that stands out to you as what I'm doing wrong...

Thanks Again
-- Greg

xds_index.js

Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new LocationsWindow({
renderTo: Ext.getBody()
});
cmp1.show();
});

LocationsWindow.js

LocationsWindow = Ext.extend(LocationsWindowUi, {
initComponent: function() {
LocationsWindow.superclass.initComponent.call(this);

... other listeners defined ...

// selects the first row in the GridPanel after it is loaded
//
this.LocationsGrid.getStore().on('load', function(store, recs, opts) {
this.LocationsGrid.getSelectionModel().selectFirstRow();
}, this);

var selModel = this.LocationsGrid.getSelectionModel();

// loads the FormPanel fields from the selected record when
// a new row is clicked
//
selModel.on('rowselect', function(selModel, recIndex, rec) {
this.LocationsForm.getForm().loadRecord(rec);
}, this);

// checks to see if the FormPanel fields have changed and have not been saved
//
selModel.on('beforerowselect', function(selModel, recIndex, keepExistingFlg, rec) {
if (this.LocationsForm.getForm().isDirty()) {
Ext.MessageBox.alert('Alert', '[Before Row Selected Event] Unsaved changes exist. Click Save or Cancel before selecting another record');
return false;
}
}, this);

} // ### end of initComponent ###

}); // ### end of LocationsWindow Class ###

LocationsWindow.ui.js

LocationsWindowUi = Ext.extend(Ext.Window, {
title: 'Locations',
width: 1240,
height: 686,
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'grid',
store: 'LocationsStore',
region: 'north',
height: 203,
autoExpandColumn: 'Name',
autoExpandMin: 200,
split: true,
autoExpandMax: 500,
margins: '5px 5px 0px 5px',
ref: 'LocationsGrid',
columns: [

... column definitions ...

],
fbar: {
xtype: 'toolbar',
ref: '../locationsGridToolbar',
items: [

... buttons ...

]
}
}, // ### end grid panel ###
{
xtype: 'form',
region: 'center',
autoScroll: true,
padding: '3px 3px 0px 3px',
margins: '0px 5px 0px 5px',
trackResetOnLoad: true,
ref: 'LocationsForm',
items: [

... form field definitions

],
fbar: {
xtype: 'toolbar',
ref: '../LocationsFormToolbar',
items: [

... buttons ...

]
}
} // ### end form panel ###

]; // ### end window items ###

LocationsWindowUi.superclass.initComponent.call(this);

} // ### end initComponent ##

}); // ### end LocationsWindowUi Class ###

LocationsStore.js

LocationsStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
LocationsStore.superclass.constructor.call(this, Ext.apply({
storeId: 'LocationsStore',
root: 'rows',
totalProperty: 'results',
autoLoad: true,
messageProperty: 'user_message',
remoteSort: true,
url: 'locations/grid_locations.php',
fields: [

... field definitions ...

]
}, cfg));
}
});
new LocationsStore();

gskluzacek
24 Nov 2010, 11:39 AM
Condor,

I had replied previously, but not seeing that one show up... may be it needs to be moderated. Hopefully it will show up soon as I posted the relevant code. Anyhow...

I'm beginning to suspect this is an timing issue with the beforerowselect even on the RowSelectionModel. I was stepping through the code in my listener and the MessageBox is initially displayed on top of my main window (so I am assuming the z-index is set correctly. But when I return false and exit the listener, that is when the MessageBox goes behind the main window. I've even tried calling sendToBack() on the main window before and after displaying the MessageBox.


selModel.on('beforerowselect', function(selModel, recIndex, keepExistingFlg, rec) {
if (this.LocationsForm.getForm().isDirty()) {
Ext.WindowMgr.sendToBack(this);
Ext.MessageBox.alert('Alert', '[Before Row Selected Event] Unsaved changes exist. Click Save or Cancel before selecting another record');
Ext.WindowMgr.sendToBack(this);
return false;
}
}, this);


I still get the same result.

Thanks for your help.
-- Greg

gskluzacek
24 Nov 2010, 11:57 AM
Yep definitely something to do with timing as if defer the MessageBox alert for 250 milliseconds the message box is displayed on top as desired.


Ext.MessageBox.alert.defer(250, Ext.MessageBox, ['Alert', '[Before Row Selected Event] Unsaved changes exist. Click Save or Cancel before selecting another record']);

Now my next question...

WHY?

And is this a BUG?

Thanks,
-- Greg