Three types and comparisons of Ext.button click events

ExtJS's writing is so flexible that it now collects three ways to spell the button click event. Make a record today for future reference.
First create a JS file to write the following code:
1. Click Default for Handler
Ext.onready (function () {

New Ext.button ({
Text: "OK",
To draw the button in the body
RenderTo:Ext.getBody (),
The width of the button
MINWIDTH:100,
ID: "MyButton"
Click event
Handler:function () {
Ext.MessageBox.show ({
Title: ' Hint ',
Msg: ' You clicked on me. ' ,
Buttons:Ext.MessageBox.OK,
Fn:function () {},
Icon:Ext.MessageBox.INFO
});
}
});
});


2. Add a listener method to monitor the Click event. Pay attention to listeners not less s
Ext.onready (function () {

New Ext.button ({
Text: "OK"
To draw the button in the body
RenderTo:Ext.getBody (),
The width of the button
MINWIDTH:100,
ID: "MyButton",
Click event
listeners:{
"Click": Function () {
Ext.MessageBox.show ({
Title: ' Hint ',
Msg: ' You clicked on me. ' ,
Buttons:Ext.MessageBox.OK,
Fn:function () {},
Icon:Ext.MessageBox.INFO
});
}
}
});
});


3. If you have developed multiple components and you need to interact, you may want to write the events outside to achieve loose coupling.
The code in JS is as follows:
Ext.onready (function () {

New Ext.button ({
Text: "OK"
To draw the button in the body
RenderTo:Ext.getBody (),
The width of the button
MINWIDTH:100,
ID: "MyButton"
});
});

The page code is as follows:
<script type= "Text/javascript" >

Ext.onready (function () {
Get components
var btn = ext.getcmp ("MyButton");
Bind Point hit Event
Btn.on ("click", Function () {
Ext.MessageBox.show ({
Title: ' Hint ',
Msg: ' You clicked on me. ' ,
Buttons:Ext.MessageBox.OK,
Fn:function () {},
Icon:Ext.MessageBox.INFO
});
});
});

</script>

the difference between handler and listener

Handler

Handler is associated with action, and an action can have multiple component references;

The action is an object that can be shared, with five main attributes: text, handler, ICONCLS, disabled, hidden

The way component is constructed is more interesting:

New Ext.button (Action)

is the button to receive an action object as a construction parameter? However, the API for viewing the button did not find the action attribute. Instead, the button's construction parameter is an (object config), that is, just a configuration object (containing various attributes), and the five properties of the action are exactly the button, so you can receive an action to construct it.

Other properties are not considered, see the handler configuration item documentation in Handler,button, which is associated with the Click event. That is, click is the first event of the button's component (refer to the handler document in the action), which is how handler is run: triggered by the first event of a component .

Listener

It says handler is the response function to the first event, and the observable is the root of the event.

Ext.util.Observable is the parent class (or interface) of all objects that can be monitored by events. Observable has only one configuration item, that is listeners, and a listener is a combination of event name + handler function, such as:

' Click ': function () {...}, ' MouseOver ': function () {...}

Observable also provides a number of related methods for handling events, such as adding events, triggering events, removing listeners, and so on.

From the analysis can be summed up:

1, handler is a special listener;

2, handler is a function, and listener is <event, function > pair;

3. Handler is associated with action to allow multiple components to share an action. and listener is related to event, can facilitate the management of event;

But there are some differences between handler and ordinary event + listener, and one example is, if you use

Ext.util.Observable.capture (button, function (name) {if (name== "click") return False})

To capture the Click event in advance, and when the click is blocked, if the button's click is handler, then the return false function of capture is not valid, and if the button defines the listener that contains the Click event, The above capture is effective.

Http://blog.csdn.net/weihua1984/archive/2010/06/21/5684342.aspx

Http://blog.csdn.net/smilingleo/archive/2009/01/08/3733177.aspx