extjs => 이벤트 모델

소개

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

extjs
이벤트 모델

수색…

소개

컨트롤러 듣기