extjs
Evenementmodel
Zoeken…
Invoering
ExtJS pleit voor het gebruik van en het luisteren naar evenementen tussen klassen. Door gebeurtenissen af te vuren en te luisteren naar ontslagen gebeurtenissen, hebben klassen geen 'vuile' kennis van elkaars klassenstructuur nodig en voorkomen ze koppelingscode samen. Bovendien maken gebeurtenissen het gemakkelijk om naar meerdere instanties van dezelfde component te luisteren door een generieke luisteraar toe te staan voor alle objecten met dezelfde selector. Ten slotte kunnen andere klassen mogelijk ook gebruikmaken van reeds bestaande evenementen.
Controllers luisteren naar componenten
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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow