PDA

View Full Version : Event handler 'transfered' when new instance of form panel created??



WagsMax
6 Oct 2012, 6:23 PM
In the constructor of a form panel I am trapping the dirtychange event:
me.getForm().on('dirtychange', function(form, isDirty) { ...
Trouble is, when I open more than one instance of this panel, the event handler seems to 'transfer' to the last instance created. i.e. if I open 3 of these form panels in a tab panel, and I go back to the first panel and make a change, the event is fired to the last (3rd) form panel causing all kinds of mayhem.

I need each form panel to have its own unique dirty handler. How do I do this?

skirtle
7 Oct 2012, 3:41 AM
Can you post a test case?

It sounds like something is being shared between your forms but it's difficult to say what without more code. Shared ids perhaps? Reference types on the prototype? Variables caught in the handler's closure that point to the last instance?

WagsMax
7 Oct 2012, 7:47 AM
Here is the pertinent (I think?) part of the panel definition. The constructor is creating the event listener which is where I am experiencing the issue.


Ext.define('ATMgo.view.CaseMain', {
extend: 'Ext.form.Panel',
alias: 'widget.casemain',
itemId: 'casemain', // on creation this becomes unique e.g. 'casemain230219991209160106540000'


frame: false,
title: 'Main',
bodyPadding: 5,
closable: false,

// custom configs
config: {
case_record: null
},

constructor: function(config) {
me = this;
config = config || {};
config.trackResetOnLoad = true;
me.callParent([config]);
console.log(me.itemId);

me.getForm().on('dirtychange', function(form, isDirty) {
if (isDirty) {
Ext.ComponentQuery.query('#' + me.itemId)[0].down('#savebtn').enable();
Ext.ComponentQuery.query('#' + me.itemId)[0].down('#undobtn').enable();
}
else {
Ext.ComponentQuery.query('#' + me.itemId)[0].down('#savebtn').disable();
Ext.ComponentQuery.query('#' + me.itemId)[0].down('#undobtn').disable();
}
});
},
...

skirtle
7 Oct 2012, 8:43 AM
OK, now things become clearer.

The critical mistake is here.


constructor: function(config) {
me = this;

It should be this:


constructor: function(config) {
var me = this;

The way you have it currently results in all the listeners sharing the same me variable, which will be equal to the last form you created.

The way you're using component queries is also a bit odd. I think I'd probably write it something like this:


Ext.define('ATMgo.view.CaseMain', {
...
constructor: function(config) {
var me = this;

me.callParent([Ext.apply({
trackResetOnLoad: true
}, config)]);

me.getForm().on('dirtychange', me.onDirtyChangeHandler, me);

me.saveBtn = me.down('#savebtn');
me.undoBtn = me.down('#undobtn');
},

onDirtyChangeHandler: function(form, dirty) {
this.saveBtn.setDisabled(!dirty);
this.undoBtn.setDisabled(!dirty);
},

...
});

WagsMax
8 Oct 2012, 9:54 AM
Thank you! That solved the issue, and your example of component queries is much clearer.