Ext js simple event processing and object scope

For ext JSProgramThe simple creation is mainly to introduce the ext-base.js and ext-all.js two files, and then add some style files, the online ext JS learning materials are also more, I am here also a simple share.
Simple processing of ext JS events:
This example is a simple test of prototype of Number:

 // Simple  Test
  Function  Testnumber () {number. Prototype. Add = Function  (){  //  Sum of the first two parameters          //  VaR num1 = arguments [0];          // VaR num2 = arguments [1];          //  Alert (num1 + num2 );          VaR Sum = 0 ;  VaR STR = "" ;  //  The for loop returns the sum of all parameters.          For ( VaR I = 0; I <arguments. length; I ++ ) {Str + = Arguments [I]. tostring () + "+" ; Sum + =Arguments [I];}  //  For... in loop to get the sum of all parameters          //  For (var j in arguments ){          //  STR + = J + "+"; // Note: J traverses subscripts.          //  Sum + = arguments [J];          //  }  Str = Str. substring (0, str. lastindexof ('+' ); Alert (Str + "And:" +Sum );}  VaR Num = 0 ; Num. Add ( 11, 12, 13, 15 ); //  Sum }

Extjs manages events through Ext. eventmannager object management. extjs encapsulates W3C events in ext. eventobject event object. The class or Interface Supporting Event processing is Ext. util. observable. All components or classes that inherit this class support the event handling and response functions of adding objects.
Note: Ext. Get is used to obtain the element (DOM element) and Ext. getcmp is used to obtain the component object.
Note: event processing is different (test is a JS function)
Ext js obtains the component object: Ext. getcmp ("btntest"). text;
Processing of events in Dom: processing of onclick in document. getelementbyid ("alinktest"). onclick = test; // dom
Extjs handles DOM object events: Ext. Get ("alinktest"). onclick = test (); // The onclick processing of extjs

Handler \ on \ listeners is commonly used for simple processing of ext JS event processing: (the example uses alert to pop up. Ext JS has encapsulated a layer, ext. MSG. alert ('infotip ',' information content! '))

Ext. onready (Function  () {Createwin (). Show ();});  //  Test Event  Function  Createwin (){  VaR Win = New  Ext. Window ({Title: "Window title", height: 500, width: 300 , Items :[  New Ext. Form. textfield ({ID: "txttest" }), {Xtype: "Textfield", ID: "txtusername", fieldlabel: "username", emptytext: "Enter name", readonly:True  }, {Xtype: "Button", ID: "btnhandler", text: "handler event processing ", //  Handler event processing Handler: Function () {Alert ('test handler event! '); Btnhandler ("test1", "Test2" );}},  New Ext. Button ({ID: 'btnlistener ', text: 'listeners multi-event listener', minwidth: '123' , Listeners :{  //  Multi-event listening "Mouseout ":Function () {Alert ('You have left! ' )}, "Click ": Function () {Alert ('that's me! ' )}, "Disable ": Function () {Alert ('triggers the disable event of listeners' )}  //  The on attribute can also implement the same function.  }}),  New  Ext. Button ({ID: "Btnhandlertwo", text: "Test the processing of the first two button events", Handler:  Function (){ // Alert ("I am my ID:" + This . ID ); //  Obtain your own ID Alert ("My own text:" + This . Text ); //  Get your own text Alert ("window title:" + This  . Ownerct. Title); alert ( "This is the text of the first button:" +This . Ownerct. Items. itemat (1). Text ); //  Return to the text of one index of the parent container items Alert ("this is the text of the second button:" + Ext. getcmp ("btnlistener"). Text ); //  Ext. getcmp get text by ID                          This . Ownerct. Items. itemat (1). settext ("change the first text content! "); //  Modify attributes Ext. getcmp ("btnlistener"). Disable (); //  Call Method  })], Buttons: [{text: "Save", ID: "btnsave", Handler: Function () {Alert ("Get output text:" + Ext. getcmp ("txttest" ). Getvalue () }}, {text: "Cancel", ID: "btncancel", listeners: {"click ": Function () {Alert ('Why did you cancel it before! ' ) }}]});  Return  Win ;}
 

Function Test () {alert ("test link! ");}

Function btnclick (OBJ, e) {alert (OBJ + ", this is what you clicked on me! ");}

Function btnhandler (OBJ, e) {alert ("Source:" + OBJ + "; number:" + E );}

Simple testing of the scope:

 //  Scope Test  VaR TAA = "I Am a Windows Domain AA! " ;  Function Scopetest (){ //  Scope Test      VaR TAA = "I Am a TAA object domain AA! " ;  VaR TBB = {AA: "I am a TBB object AA! ", BB:" I am a TBB object BB! " }; VaR TCC = {AA: "I'm a TCC object AA! ", BB:" I am a TCC object BB! ", CC:" I'm a TCC object CC! " }  VaR Win = New  Ext. Window ({Title: "Windowstitle", width: 200, height: 500 , Items: [{xtype: "Button", ID: "btnxtype", text: "Test Scope 1" },  New Ext. Button ({ID: "btnext", text: "Test scope 2" })]}); Win. Show (); Ext. getcmp ( "Btnxtype"). On ("click ", Function () {Alert (window. Taa); alert ( This  . Aa) ;}, TBB) Ext. getcmp ( "Btnext"). On ("click ", Function () {Alert ( This  . CC)}, TCC );} 

CodeThey are all testing and modifying. Let's see what the modification will do and what the modification will do. Let's take some common skills and make breakthroughs and make improvements in constant attempts, find the truth.