1

次のコードを使用してレンダリングしているパネルがあります。

new Ext.Panel({
    id: 'textPanel',
    height: 1000,
    width: 1200,
    renderTo: Ext.getBody(),
    html:"An HTML fragment, or a DomHelper specification to use as the layout element content. The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended."
});

そして、エンターキーが押されたときにイベントを聞きたいです。だから、私は次のようにキーマップを作成しています...

var map = new Ext.KeyMap(Ext.getCmp('textPanel').body, {
    key: Ext.EventObject.ENTER,
    fn: onKeyPress,
    //  handler: onKeyPress,
    scope: this
});

しかし、onKeyPress 関数は呼び出されていません。

私はすでに使用してみました

Ext.getCmp('textPanel').body.dom,
Ext.getCmp('textPanel').el.dom,
Ext.getCmp('textPanel').el

それ以外の

Ext.getCmp('textPanel').body

成功しませんでした。

そこで「ドキュメント」を使用すると、 onKeyPress 関数が呼び出されます。すなわち

var map = new Ext.KeyMap(document, {
    key: Ext.EventObject.ENTER,
    fn: onKeyPress,
    //  handler: onKeyPress,
    scope: this
});

これは完全に機能しますが、ドキュメント全体を聞きたくありません。パネルだけ聞くにはどうすればいいですか？

4

2 に答える 2

2

extjs 3.4 では、使用する場合KeyMapは、最初にパネル要素にフォーカスを設定する必要があります。そうしないと、キー イベントは常にドキュメント レベルで発生するため、パネルでキー イベントをリッスンできません (これが、リッスンできた理由です)ドキュメントの主要なイベントのみ)

しかし、extjs ではパネルにフォーカスを設定する方法がないため、それ自体にフォーカスを設定して主要なイベントをリッスンできるカスタム パネル クラスを作成する必要があります。

Ext.namespace('Saket');

Saket.FocusPanel = Ext.extend(Ext.Panel, {
    onRender : function()
    {
        Saket.FocusPanel.superclass.onRender.apply(this, arguments);

        // this element allows the Window to be focused for keyboard events
        this.focusEl = this.el.createChild({
                    tag: 'a', href:'#', cls:'x-dlg-focus',
                    tabIndex:'-1', html: ' '});
        this.focusEl.swallowEvent('click', true);

        this.getEl().on({
            click : this.focus,
            scope : this
        });
    },
    focus : function()
    {
        this.focusEl.focus();
    }    
});

new Saket.FocusPanel({
    id: 'textPanel',
    height: 200,
    width: 300,
    renderTo: Ext.getBody(),
    html:"An HTML fragment, or a DomHelper specification to use as the layout element content. The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.",
    keys: {
        key: Ext.EventObject.ENTER,
        fn: function() {alert('bingo');},
        scope: this
    }
});

デモ: http://jsfiddle.net/silentsakky/PdyqW/3/

于 2013-10-04T20:45:27.700 に答える
0

keydown以下を使用して、パネルの要素にリスナーを追加しますgetEl()。

Ext.getCmp('textPanel').getEl().on('keydown', function(f, e) {
    if (e.getKey() === Ext.EventObject.ENTER)
    {
        //do whatever you want here
    }
});
于 2013-07-01T14:07:11.657 に答える