Resetting event handlers in ExtJS

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.init开发者_高级运维Component.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());
};
};

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