PDA

View Full Version : Cannot destroy window



phamtranquocviet
23 Mar 2012, 8:03 PM
Hi,
I have a grid, which has a "Add User" button at the bottom. When clicking "Add User", a window pops up. When I click "cancel" button on the pop-up window for the first time, it closes fine. When I open the pop up again, and click "Cancel" again, I get the following error. My debug messages show that the click event was attached twice for some reason. I am thinking the window was not really destroyed the first time, but don't know how to fix this. I also replaced "destroy()" with "close()", but it does not work. Please help. Thanks.

First time debug messages:
before...
after...

Second time debug messages:
before...
after...
before...
cancelButton.up("window") is undefined
[Break On This Error]

}

View code:


Ext.define("Iip.view.iip.adm.AddUser", {
extend: "Ext.window.Window",
alias : "widget.add-user-form",
title : "Add User",
layout: "fit",
border: 0,
defaultFocus: "firstName",
width: 316,
height: 150,
autoShow: true,
closeAction: "destroy",

injectErrorSpan: function(addUserButton) {
Ext.DomHelper.append(addUserButton.container, {id: "add-user-error", tag: "span", cls: "error"});
},

wireForm: function(addUserButton) {
var controller;

controller = Iip.app.getController("Iip.controller.iip.adm.AddUsers");
controller.init();
},

initComponent: function() {
this.items = [
{
xtype: "form",
url: "index.php",
bindForm: true,
items: [
{
xtype: "textfield",
id: "firstName",
name : "firstName",
fieldLabel: "First Name",
allowBlank: false,
width: 300,
margin: "5 0 0 0"
},
{
xtype: "textfield",
id: "lastName",
name : "lastName",
fieldLabel: "Last Name",
allowBlank: false,
width: 300,
margin: "5 0 0 0"
},
{
xtype: "textfield",
id: "email",
name : "email",
fieldLabel: "Email",
allowBlank: false,
width: 300,
margin: "5 0 0 0"
}
]
}
];

this.buttons = [
{
text: "Cancel",
id: "cancel-add-user"
},
{
text: "Add",
id: "add-user",
listeners: {afterrender: this.wireForm }
}
];

this.callParent(arguments);
}
});


Controller code:


Ext.define("Iip.controller.iip.adm.AddUsers", {
extend: "Ext.app.Controller",

addUser: function(addButton) {
// Input validation
if(addButton.up("window").down("form").getForm().isValid() == false ) {
return;
}
},

cancel: function(cancelButton) {
console.log("before...");
cancelButton.up("window").destroy();
console.log("after...");
},

init: function() {
this.control(
{
"add-user-form #cancel-add-user": {
click: this.cancel
}
},
{
"add-user-form #add-user": {
click: this.addUser
}
}
);
}
});


Here is how the window is created:


handleAddUser: function(button, event) {
Ext.create("Iip.view.iip.adm.AddUser");
},

vietits
23 Mar 2012, 9:21 PM
Because the controller.init() is called each time opening the AddUsers windows, so the number of registering event handlers by controller.control() will increase by the times of opening windows. If you open AddUsers windows ten times, the event handler will be registered ten times. When you click Cancel button your cancel() method will be called ten times. The first time of calling, you destroy the windows and all of its components including cancelButton. The second time of calling, the window is no longer exist and it generates error.

Try to fix your code as below:


wireForm: function(addUserButton) {
var controller;

controller = Iip.app.getController("Iip.controller.iip.adm.AddUsers");
controller.init();
controller.init = Ext.emptyFn;
},

phamtranquocviet
24 Mar 2012, 3:05 AM
That works like a charm. Thanks, vietits.

börn
24 Mar 2012, 4:32 AM
You can attach a single:true config on your listener so the listener only executes for one time,then destroys.