Processing clicking only when show window

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();
                    }
                });

            }
        }
    }
],

});

Scriptable · Accepted Answer · 2015-01-27T13:40:53.213

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();
    }
});

hello, thanks, xtype: "bookwrap" is extend: 'Ext.panel.Panel', — user3045654, Jan 27 '15 at 11:32
Very thanks, but if i am use listeners in 'Ext.window.Window', all good, but when i am use 'Ext.panel.Panel' i am have problem this.mapEnterNew.destroy() is not work :( — user3045654, Jan 27 '15 at 14:24

Processing clicking only when show window

1 Answers1