Three methods for writing Ext. button click events

The extjs writing method is too flexible. Now we have collected three methods for writing button click events. Make a record today for future reference.
First, create a JS file and write the following code:
1. Click handler by default.
Ext. onready (function (){

New Ext. Button ({
Text: "OK ",
// Draw the button in the body
Renderto: Ext. getbody (),
// Button width
Minwidth: 100,
ID: "mybutton"
// Click an event
Handler: function (){
Ext. MessageBox. Show ({
Title: 'hup ',
MSG: 'You clicked on me! ',
Buttons: Ext. MessageBox. OK,
FN: function (){},
Icon: Ext. MessageBox. Info
});
}
});
});

2. Add a listening method to listen to click events. Note that the listeners should not be less than S.
Ext. onready (function (){

New Ext. Button ({
Text: "OK"
// Draw the button in the body
Renderto: Ext. getbody (),
// Button width
Minwidth: 100,
ID: "mybutton ",
// Click an event
Listeners :{
"Click": function (){
Ext. MessageBox. Show ({
Title: 'hup ',
MSG: 'You clicked on me! ',
Buttons: Ext. MessageBox. OK,
FN: function (){},
Icon: Ext. MessageBox. Info
});
}
}
});
});

3. If you develop multiple components and need to interact with each other, you may need to write the events out to achieve loose coupling.
The code in JS is as follows:
Ext. onready (function (){

New Ext. Button ({
Text: "OK"
// Draw the button in the body
Renderto: Ext. getbody (),
// Button width
Minwidth: 100,
ID: "mybutton"
});
});

The webpage code is as follows:
<SCRIPT type = "text/JavaScript">

Ext. onready (function (){
// Obtain the component
VaR BTN = ext. getcmp ("mybutton ");
// Bind a click event
BTN. On ("click", function (){
Ext. MessageBox. Show ({
Title: 'hup ',
MSG: 'You clicked on me! ',
Buttons: Ext. MessageBox. OK,
FN: function (){},
Icon: Ext. MessageBox. Info
});
});
});

</SCRIPT>