I have a main window with a custom Ext.panel.Panel using ExtJS 5.0.1.
Clicking an item shown on the custom panel creates and shows a custom Ext.window.Window for editing said item.
For the purpose of getting some kind of answer, or a starting point for my own situation, I'll ask for standard Ext components.
On closing the custom window, a variable in the custom panel needs to be updated to show that changes have been made.
This is a different requirement to a confirmation message before closing the window; the window does not control saving of information to a DB, but needs to let another component know that changes have been made.
This should be as simple as setting a boolean unsavedChanges to true on the panel if the window's information has been altered; I've performed this on a simpler page, which did not have the additional window as an obstacle.
Due to the use of the window, my typical go-to methods of calculating a variable as use of this.up or this.lookupReference returns null, or throw an error.
I'm aware that I can consider going to the parent of the page, then try and work down, but I'm not experienced enough to consolidate standard javaScript with the up and down capabilities of ExtJS, or at least understand the intricacies of ExtJS to navigate past the "item window" back to the panel.
How would I be able to refer to the panel while closing the window in order to update the panel's data?
Well, there's a couple of ways.
First, you can pass in your panel, or a callback function, during the construction of the window. e.g.:
// in panel
var window = Ext.create('MyWindow', { callingPanel: this })
...
// in window
onClose: function() { this.callingPanel.doStuff(); }
The other way to be to register a listener to the 'close' event of the window.
// in panel
var window = Ext.create('MyWindow', {
listeners: {
scope: this,
close: this.doStuff
}
})
The listener approach tends to work best when you don't want to tightly couple the window to the calling panel.