将KeyMaps添加到视图端口的最佳实践

Question

创建/绑定KeyMaps到视图端口的最佳位置是什么？

给出这样一个非常简单的Viewport：

Ext.define('EmptyTemplate.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.layout.container.Fit',
        'EmptyTemplate.view.Main'
    ],
    layout: {
        type: 'fit'
    },

    items: [{
        xtype: 'app-main'
    }],

    listeners: {
        afterrender: {
            fn: function(){
                // map one key by key code
                this.keyMap = Ext.create('Ext.util.KeyMap', this.el, {
                    scope: this,
                    key: Ext.EventObject.ENTER,
                    fn: function () {
                        console.log("enter pressed");
                    }
                });
            }
        }
    }
});

创建KeyMaps的正确方法是什么？

Answer 1

优先提供一些最佳实践建议：

如果需要设置组件，请使用

• [initComponent][1] (您应该阅读这篇文章获取详细信息)，
• 另一个提供了template methods和
• 在一些罕见的情况下，constructor。

在这种情况下，我将使用模板方法afterRender

Ext.define('EmptyTemplate.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.layout.container.Fit',
        'EmptyTemplate.view.Main'
    ],
    layout: {
        type: 'fit'
    },

    items: [{
        xtype: 'app-main'
    }],

    afterRender: {
        this.callParent(arguments); // always!!
        this.bindKeyMap();
    },

    bindKeyMap: function() {
        var me = this; // use 'me' if 'this' occurs more then 3 times
        if(me.keyMap) {
            me.keyMap.enable();
            return;
        }
        // map one key by key code
        me.keyMap = Ext.create('Ext.util.KeyMap', me.el, {
            scope: me,
            key: Ext.EventObject.ENTER,
            fn: me.onEnter
        });
    },

    unbindKeyMap: function() {
        this.keyMap.disable();
    },

    onDisable: function() {
        this.unbindKeyMap();
        this.callParent(arguments); // always!!
    },

    onEnable: function() {
        this.callParent(arguments); // always!!
        this.bindKeyMap();
    },

    onEnter: function(){
       // i am executed in the scope of the class instance
    }
});

请注意，上面的示例处理整个密钥映射，但您也可以从映射中选择添加 / 删除单键。

注意到，这是未经测试的原型代码，但它应该是这样工作的。

如何找到模板方法

1. 去文档
2. 显示受保护成员

​

​

1. 寻找

标记

​

​

这篇关于重写也可能是个不错的读物。