Three methods for writing Ext. button click events

From: http://maidini.blog.163.com/blog/static/377627042008111061844345/

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 followingCode:
1. Click the default value Handler
Ext. onready (Function(){
           
            NewExt. Button ({
               Text:"OK" ,
                // SetButton PaintingBody
                Renderto: Ext. getbody (),
                // Button Width
                Minwidth: 100,
                ID: "Mybutton"
                // Click Event
                Handler: Function (){
                    Ext. MessageBox. Show ({
                        Title: ' Prompt' ,
                       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:Do not reduce the number of S for listeners
Ext. onready (Function(){
           
            New Ext. Button ({
                Text: " OK"
                // Set the button Draw in Body
                Renderto: Ext. getbody (),
                // Button Width
                Minwidth: 100,
                ID: "Mybutton" ,
                // Click Event
                Listeners :{
                    "Click" : Function (){
                        Ext. MessageBox. Show ({
                            Title: ' Prompt' ,
                            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"
                // Set the button Draw in Body
                Renderto: Ext. getbody (),
                // Button Width
                Minwidth: 100,
                ID: "Mybutton"
       });
 });

The webpage code is as follows:
< Script Type= "Text/JavaScript">
   
   Ext. onready (Function(){
        // Obtain Components
        VaRBTN = ext. getcmp ("Mybutton");
        // Bind a click event
       BTN. On ("Click",Function(){
                       Ext. MessageBox. Show ({
                           Title:' Prompt' ,
                           MSG:' You clicked on me!' ,
                            Buttons: Ext. MessageBox. OK,
                            FN: Function (){},
                             Icon: Ext. MessageBox. Info
                        });
                    });
    });
   
</ Script >

 

========================================================== ============================

The following is my own test code:

VaR buttonclick = function (){
// Ext. MessageBox. Alert ("prompt", "Save? ")
// Ext. MessageBox. Confirm ("prompt", "Do you want to save the changed data? ");
Ext. MessageBox. Show ({Title: "prompt", MSG: "Do you want to save the changed data? ", Icon: ext. messageBox. question, buttons: {"yes": "Yes", "no": "no", "cancel": "cancel"}, closable: True, progress: true });
}

var button = new Ext. button ({name: "mybutton", text: "add", Handler: buttonclick}); // specify the event in handler mode when defining
button. render ("mypanel"); // specify the display area. mypanel is the DIV in the HTML page.
// Ext. select ('myclick '). on ('click', onclick); // invalid
// Ext. get ('mypanel '). on ('click', buttonclick); // obtain from the region
// button. on ('click', buttonclick); // use the instance directly