Javascript-extjs-Events

Events (ExtJS event)

Ext.Util.observable class

Ext.Util.observable is an interface that provides support for the events of EXT components, which are different from traditional events, so a set of event systems is required. Only the components that implement the interface have those special events.

Ext.eventobjectimpl class

The original event object in the DOM is ExtJS encapsulated as Ext.eventobjectimpl. The Ext.eventobjectimpl in ExtJS represents the original event object, which stores the information when the event occurs. The E in the arguments of each listener function is Ext.eventobjectimpl.

GetX () | GetY () |Getxy ()//gets the x, y coordinates of the object in the document that triggered the event when the event occurred. The last method returns the array, Getxy () [0] obtains the x-coordinate, and getxy () [1] obtains the y-coordinate. Gettarget ()//gets the source object that triggered the event. Preventdefault (BOOL)//whether to block browser default actions. stoppropagation (BOOL)//whether to block event bubbling. stopevent ()//Stop the event immediately. The method internally calls Preventdefault () and stoppropagation () two functions, canceling the browser's default action while stopping event bubbling. purgeelement ()//clears all the events bound to the object. 

methods. Method

Register to listen

// adding listeners monitoring to the configuration of components listeners: {    focus:function() {        alert ("Ssssss")    }}// registering event listeners externally after component rendering is complete function () {}// or function () {}

View Code

Bulk Register Listening

listeners: {    focus:function() {alert ("Ssssss")},    click:function( {}}var link = ext.fly ("link"); Link.on (function  (e) {E.preventdefault ( true ); Ext.Msg.alert ("", "click Event");}). On (function  () {Ext.Msg.alert ("", "Mouseout Event");});

View Code

Listen scopes

Configure the run environment of the event listener through scope, because the function is running on the object, and sometimes the object may not be what you expect, so you can explicitly specify which object of the function you are running directly by configuring scope.

Ext.onready (function () {    varbtn=NewExt.button.Button ({text: "Hello"}); NewExt.window.Window ({title:"Widnow", Width:200, Height:100, listeners: {show:function() {Ext.Msg.alert ("", This. Text)//Displays the text of the button}, Scope:btn//Changing the function execution Environment}). Show ();});

View Code

Listen intercept

An event is pre-blocked by calling the Suspendevents () method on the object that binds the event so that the event listener does not execute when the event occurs.

var New Ext.button.Button ({    "mouseover",    renderTo:Ext.getBody (),    listeners: {          function () {Ext.Msg.alert ("", "MouseOver Event");}}    ); var New Ext.button.Button ({    "Pending",    renderTo:Ext.getBody (),    listeners: {          function  () {            btn1.suspendevents ();}}    );

View Code

Listening for recovery

The intercepted event is resumed by calling the Resumeevents () method on the object that is bound to the event.

varBTN1 =NewExt.button.Button ({text:"MouseOver", RenderTo:Ext.getBody (), listeners: {mouseover:function() {Ext.Msg.alert ("", "MouseOver Event");} }});varBTN2 =NewExt.button.Button ({text:"Pending", RenderTo:Ext.getBody (), listeners: {click:function() {btn1.suspendevents (); }    }});varBTN2 =NewExt.button.Button ({text:Recovery, RenderTo:Ext.getBody (), listeners: {click:function() {btn1.resumeevents (); }    }});

View Code

Listen for Unbind

You can unbind a listener by calling the UN () method on the object that is bound to the event. Unbind needs to know the name of the listener, and usually we are using an anonymous function to register the event, want to unbind it seems that only the listener is written in the global and named the function, but there is a simpler way, and in order not to write listeners externally, you can consider registering the listener on the Window object, easy to unbind.

varBTN1 =NewExt.button.Button ({text:"MouseOver", RenderTo:Ext.getBody (), listeners: {mouseover:window.show=function() {Ext.Msg.alert ("", "mouseover Event");}//the Unbind listener needs the name of the function as a parameter to be unbound, and in order not to write the listener externally, consider registering the listener on the Window object for easy unbinding.     }});varBTN2 =NewExt.button.Button ({text:"Unbind", RenderTo:Ext.getBody (), listeners: {click:function() {btn1.un ("MouseOver", window.show); }    }});

View Code

Manual Trigger

It seems that events on element and DOM cannot be triggered manually? Currently testing this method is valid in the component.

<div id= "Fire" > click I will trigger the text box's lost focus event </div>varFormpanel =NewExt.form.FormPanel ({title:' Form ', RenderTo:Ext.getBody (), Width:300, Height:125, items: [{xtype:' TextField ', id: ' Text ', Fieldlabel: ' Philosopher ', listeners: {blur:function() {Ext.Msg.alert ("", This. GetValue ()); } } }    ]}); Ext.get ("Fire"). On (' click ',function () {    //manually trigger the Select event for the drop-down box when the div with the fire ID is clicked    varTextField = Formpanel.getform (). FindField (' text '); Textfield.fireevent (' Blur ');})

View Code

Javascript-extjs-Events