6

パネルがあり、このパネルの要素のマウスオーバー イベントをキャプチャ/処理する必要があります。

現在、ExtJS パネルを次のリスナーで拡張することでこれを行っています (ここで提案されているように)。

...

listeners: {
    mouseover : {
        element : 'el',
        fn : function(){
            console.log('captured mouseover');
        }
    }
},

...

ExtJS コントローラー経由で実行できますか? 1つのコントローラーでイベント処理を行うには？

4

4 に答える 4

8

あなたは正しい道を進んでいますが、まだ完全には進んでいません。コントローラーの仕事は、要素ではなくコンポーネントを制御することです。要素のマウスオーバー イベントをコンポーネント レベルで使用できるようにする場合は、別個の 'my​​panelmouseover' イベントとして再起動し、それをコントローラーの control() で使用します。 素敵できれい。

編集：

方法は次のとおりです。

Ext.define('My.Panel', {
    extend: 'Ext.panel.Panel',

    constructor: function(config) {
        var me = this;

        me.callParent(arguments);

        me.addEvents(
            'mypanelmouseover'
        );
    },

    afterRender: function() {
        var me = this;

        me.callParent();

        // Declarative style with listeners reads better,
        // but this is shorter and does the same
        me.mon(me.getEl(), 'mouseover', function() {
            this.fireEvent('mypanelmouseover')
        }, me);
    }
});

Ext.define('My.Controller', {
    extend: 'Ext.app.Controller',

    init: function() {
        var me = this;

        me.control({
            'panel': {
                mypanelmouseover: me.onMyPanelMouseover
            }
        });
    }
});

お役に立てれば。主なアイデアは、読み取り不能なコールバック チェーンを作成するのではなく、宣言的であり続け、コードを分離することです。良い副次的効果は、あなたがコントロールでき、どのイベントをいつ、どのように反応させるかを決定できることです。

于 2012-08-13T19:55:23.403 に答える
4

コンポーネントのレンダリング後にリスナーをアタッチできます。

Ext.define('My.controller.A', {
    extend:'Ext.app.Controller',

    init: function(){ 
        this.control({
            'panel1':{
                afterrender: function(cmp){
                    cmp.getEl().on('mouseover', this.panel1_mouseOver);
                }
            }
        });
    },

    panel1_mouseOver: function(e, t, eOpts){
        alert('mouseover');
    }
});
于 2012-08-13T17:26:25.997 に答える
2

その機能を追加する唯一の方法は、Panel コンポーネントのライブラリのソースを変更することだと思います。これは良い考えではないと思います。余分なリスナーでサイトの速度が低下する可能性があるからです。

http://docs.sencha.com/ext-js/4-1/source/Panel.html#Ext-panel-Panel 「me.addEvents」を探して、ExtJS がアクセスを許可することを決定したイベントを確認します。そこにマウスオーバーイベントを追加してから、コントローラーにリスナーを追加できます。

そのリスナーのために正確に何をしていますか？パネルの div 要素にクラスを追加するだけの場合は、overCls 構成http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overClsを使用できます。

mouseover イベントをサポートするコンポーネントはごくわずかのようです。このマウス オーバー機能をメニューまたはボタンコンポーネントに分離することは可能でしょうか?

于 2012-08-13T16:23:17.477 に答える
1

すべてのコンポーネントには「getEl」メソッドがあります。このメソッドを使用して Dom 要素を取得し、それにイベントを登録します。

于 2012-08-13T17:01:41.803 に答える