Example Analysis of event Mechanism in Ext.js4.2.1
This article mainly shows you the "example Analysis of event Mechanism in Ext.js4.2.1", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and study this article "example Analysis of event Mechanism in Ext.js4.2.1".
One: brief introduction
Events in Ext follow the tree model, and there are mainly several classes related to events: Ext.util.Observable,Ext.lib.Event,Ext.EventManager and Ext.EventObject.
Ext encapsulates native browser events using Ext.lib.Event,Ext.EventManager and Ext.EventObject, and finally gives us a unified set of common event interfaces across browsers.
Two: Ext.util.Observable
Ext.util.Observable plays an important role in the Ext event model, located at the top of the Ext component, and provides the most basic function of handling events for the Ext component. All controls that inherit from the Ext.util.Observable class can support events.
Ext.onReady (function () {
Var test = Ext.get ("test")
Var test2 = Ext.get ("test2")
/ / test.on ("click", function () {
/ / alert ("handler1")
/ /})
/ / test.on ("click", function () {
/ / alert ("handler2")
/ /})
Ext.define ('People', {
Config: {
Name:''
}
/ / extend: Ext.util.Observable
Mixins: {
Observable: 'Ext.util.Observable'
}
Info: function (event) {
Return this.name + "is" + (event? "ing": "doing nothing")
}
Constructor: function (config) {
Var me = this
Me.addEvents ({
'walk': true
'eat': true
});
Me.initConfig (config)
Me.mixins.observable.constructor.call (this, config)
}
});
Var people = Ext.create ("People", {
Name: "Alex"
});
People.on ("walk", function () {
This.state = "walk"
Ext.Msg.alert ("event", this.name + "is walking")
});
People.on ("eat", function () {
This.state = "eat"
Ext.Msg.alert ("event", this.name + "is eating")
});
Test.on ("click", function () {
People.fireEvent ("walk")
});
Test2.on ("click", function (e) {
Alert (this.getX () + "," + this.getY ())
Alert (e.getTarget () .value)
People.fireEvent ("eat")
});
});
Three: Ext.lib.Event
Ext.lib.Event is a utility class that is rarely used directly in practice, but event-related operations boil down to calls to these underlying functions.
GetX (), getY (), getXY () get the coordinate location of the event in the page.
GetTarget () returns the target element of the event.
PreventDefault () is used to cancel the default actions performed by the browser's current event, such as blocking page jumps.
StopPropagation () stops event delivery.
StopEvent () is equivalent to calling preventDefault () and stopPropagation ()
Four: Ext.EventManager
As an event manager, Ext.EventManager defines a series of event-related handlers, the most commonly used of which are onDocumentReady and onWindowResize
Ext.onReady () is the shorthand form of Ext.EventManager.onDocumentReady (), which will render the document on the page.
Five: Ext.EventObject
Ext.EventObject is the encapsulation of events, which provides rich tool functions to help us get event-related information. You can learn from the Ext.EventObject help documentation that many of the functions it contains have the same or even the same name as the functions in Ext.lib.Event, such as getPageX (), getPageY (), getPageXY (), getTarget (), and so on, which are actually implemented through Ext.lib.Event.
Ext.EventObject 's extension to Ext.lib.Event is an enhancement to mouse events and keystroke events, defining a series of keys that can be used to determine whether a key has been pressed:
Ext.get ("text") .on ("keypress", function (e) {
If (e.getKey ()) = = Ext.EventObject.SPACE) {
Ext.Msg.alert ("prompt", "you pressed the spacebar!")
}
});
The above is all the content of the article "sample Analysis of event mechanisms in Ext.js4.2.1". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
