Resetting event handlers in ExtJS - extjs

Question

I have a page where there are multiple records. Each record has a button to open a dialog box to create a name. The name then creates a related record in the database and updates the source record.
There is a single dialog box instantiated and I want to show the dialog box, get the result and return it to the correct record.
The code below works once but doesn't work the second time. I can see the the Create button gets clicked but the event doesn't got caught.
Many thanks for your help.
TrailNamePresenter.prototype.onCreateTrailClick = function (trailSegment, combo, personalRouteId) {
if (!this.createTrailWindow) {
this.createTrailWindowPanel = new CreateTrailFormPanel();
this.createTrailWindow = new Ext.Window({
title: 'Create Trail',
closable: true,
closeAction: 'hide',
plain: true,
items: [this.createTrailWindowPanel],
id: 'createtrailwindow'
});
}
this.createTrailWindowPanel.on('createTrail', this.getCreateTrailHandler(personalRouteId, trailSegment, combo), null, {single:true});
this.createTrailWindow.show();
};
TrailNamePresenter.prototype.getCreateTrailHandler = function(personalRouteId, trailSegment, currentTrailCombo) {
var thisPersonalRouteId = personalRouteId;
var thisPresenter = this;
var thisCurrentTrailCombo = currentTrailCombo;
var thisTrailSegment = trailSegment;
return function(newTrailName) {
thisPresenter.mapEditorService.createPersonalTrail(newTrailName, thisPersonalRouteId, thisPresenter.getCreateTrailServiceHandler(thisCurrentTrailCombo, thisTrailSegment));
};
};
CreateTrailFormPanel = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
id: 'createtrailpanel',
width: 500,
frame: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items: [
{
id: 'crt_trailnamefield',
xtype: 'textfield',
fieldLabel: 'Trail Name'
}
],
buttons: [{
text: 'Create',
handler: this.getCreateClickHandler()
},{
text: 'Cancel',
handler: function(b, e){
Ext.getCmp('createtrailwindow').hide();
}
}]
});
this.addEvents('createTrail');
CreateTrailFormPanel.superclass.initComponent.apply(this, new Array());
}
});
CreateTrailFormPanel.prototype.getCreateClickHandler = function() {
var thisPanel = this;
return function() {
var trailNameField = Ext.getCmp('crt_trailnamefield');
alert('click');
thisPanel.fireEvent('createTrail', trailNameField.getValue());
};
};

Answer 1

In ExtJS, when you have components that will belong to a parent. I would suggest using itemID, otherwise the ability of reuse of the component across your web application is reduced because id acts similarly to a singleton. Also on the action, you have {single:true} which will remove the listener after the first trigger. IF you remove that, it may solve your issue