extjs
イベントモデル

Android ASP.NET C# Language Cordova CSS HTML Java Language JavaScript jQuery PHP
サーチ…


前書き

ExtJSは、クラス間のイベントの発生とリスンの使用を主張しています。イベントを発生させ、発生したイベントをリッスンすることによって、クラスは相互のクラス構造の「汚い」知識を必要とせず、コードを結合するのを防ぎます。さらに、イベントは、同じセレクターを持つすべてのオブジェクトの汎用リスナーを許可することにより、同じコンポーネントの複数のインスタンスを簡単に聴くことができます。最後に、他のクラスも既に存在するイベントを利用することができます。

コンポーネントを聴くコントローラ

Ext.define('App.Duck', {
    extend: 'Ext.Component',
    alias: 'widget.duck',
    initComponent: function () {
        this.callParent(arguments);
        this._quack();
    },
    _quack: function () {
        console.log('The duck says "Quack!"');
        this.fireEvent('quack');
    },
    feed: function () {
        console.log('The duck looks content.');
    },
    poke: function () {
        this._quack();
    }
});
    
var feedController = Ext.create('Ext.app.Controller', {
    listen: {
        components: {
            duck: {
                quack: 'feedDuck'
            }
        }
    },
    feedDuck: function (duck) {
        duck.feed();
    }
});

var countController = Ext.create('Ext.app.Controller', {
    listen: {
        components: {
            duck: {
                quack: 'addCount'
            }
        }
    },
    quackCount: 0,
    addCount: function (duck) {
        this.quackCount++;
        console.log('There have been this many quacks: ' + this.quackCount);
    }
});

var firstDuck = Ext.create('App.Duck');
// The duck says "Quack!"
// The duck looks content.
// There have been this many quacks: 1
var secondDuck = Ext.create('App.Duck');
// The duck says "Quack!"
// The duck looks content.
// There have been this many quacks: 2
firstDuck.poke();
// The duck says "Quack!"
// The duck looks content.
// There have been this many quacks: 3


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow