Processing clicking only when show window - button

Question

i am click button, when click "ENTER" on keyboard, but i am want processing clicking only when show window ('MyDesktop.Books').But when i am show window, and then close it, when i am click "ENTER", window ('MyDesktop.Books') showing again.
How to do: processing click "ENTER" on keyboard only when show window
Code:
Ext.define('MyDesktop.Books', {
extend: 'MyDesktop.BaseWindow',
id: 'books-win',
title: 'Book',
width: 700,
height: 400,
iconCls: 'small',
layout: 'fit',
items: [
{
xtype: 'bookwrap',
listeners: {
afterrender: function() {
var mapEnterNew = new Ext.KeyMap(document, {
key: 13,
fn: function(e) {
Ext.ComponentQuery.query('bookwrap button[name=createbook]')[0].getEl().dom.click();
}
});
}
}
}
],
});

Answer 1

I think you should either only initialize the window when it's needed for display and remove afterwards, or attach the event in field/form focus and remove it on blur.
I could give a better answer / example if I knew what xtype: "bookwrap" was.
You shouldn't really need to be using getEl().dom.click(), ExtJs can handle all your form submission needs with it's built in components, you can use use refs in your controller to get references to your buttons alot easier.
This code attaches the key event handling on render and removes it again when the window is closed/hidden:
There is also a Fiddle.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Books', {
extend: 'Ext.window.Window',
id: 'books-win',
title: 'Book',
width: 700,
height: 400,
iconCls: 'small',
layout: 'fit',
items: [{
xtype: 'panel',
html: 'test'
}],
listeners: {
beforehide: function() {
this.mapEnterNew.destroy();
},
afterrender: function() {
this.mapEnterNew = new Ext.KeyMap(document, {
key: 13,
fn: function(e) {
console.log(e);
Ext.ComponentQuery.query('bookwrap button[name=createbook]')[0].getEl().dom.click();
}
});
}
}
});
Ext.create('Books').show();
}
});