Cannot fire click event on Ext.Button

**fermo111** · 11 Dec 2007 5:12 AM

I am trying to fire a click event on a button whose handler was given in the config object.
This is the code. My goal is to have the handler of the second button called in response of a click on the first button. But it does not work.

Code:

<div id='fire-btn'></div>
<div id='event-btn'></div>

Ext.onReady(function(){
	fireBtn = new Ext.Button({
		renderTo: 'fire-btn',
		text: 'Fire click event',
		handler: function(){
			eventBtn.fireEvent('click');
		}
	});
	eventBtn = new Ext.Button({
		renderTo: 'event-btn',
		text: 'Event Btn',
		handler: function(){
			alert('ok');
		}
	});
});

Thanks

Luca

**santosh.rajan** · 11 Dec 2007 6:07 AM

Define "var eventBtn = ..."

**fermo111** · 11 Dec 2007 7:47 AM

Originally Posted by santosh.rajan

Define "var eventBtn = ..."

That is not the reason. I think it has to do with the fact that the 'handler' function is not registered as an event handler for the 'click' event on the Ext.Button

**santosh.rajan** · 11 Dec 2007 8:27 AM

You are right. This works.

Code:

 listeners: {click: function() {alert("yep")}},

**fermo111** · 11 Dec 2007 8:37 AM

Originally Posted by santosh.rajan

You are right. This works.

Code:

 listeners: {click: function() {alert("yep")}},

Right. So either this is a bug or the documentation is misleading. Any comment from the Ext developers?

**tryanDLS** · 11 Dec 2007 9:23 AM

Not sure what you think the problem is - the following code works.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Hello World Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
<script text="text/javascript">
Ext.onReady(function(){
    var button = new Ext.Button({
		renderTo:'test',
		text:'Hello',
		handler: function() {
			alert('hello');
		}
	});
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

**fermo111** · 11 Dec 2007 9:33 AM

I want to call fireEvent('click') on the button and having the handler called. Presently, the handler function is not a real event handler. I think that the documentation seems to indicate that 'handler' is a shortcut for a listener on the click event, but it is not.

**tryanDLS** · 11 Dec 2007 9:38 AM

The documentation is correct. Handler is a shortcut to specifying the listeners config for the click event.

You can cannot fire the click event from the handler of the click event - that makes no sense. Even it was allowed, you would be in an endless loop.

You need to think about what you're trying to accomplish. If you want to simulate that the button was clicked, you could call fireevent('click'...) from outside the scope of the button.

**fermo111** · 11 Dec 2007 10:03 AM

Originally Posted by tryanDLS

You need to think about what you're trying to accomplish. If you want to simulate that the button was clicked, you could call fireevent('click'...) from outside the scope of the button.

In fact this is exactly what i want to do, but it does not work. See the example in my first post.

**santosh.rajan** · 11 Dec 2007 6:24 PM

Let me explain the problem here. If you use fireEvent to fire a buttons click event, the buttons handler function does not handle it. On the other hand the buttons 'on click' event does. In the first example one button is firing the click event of the second button.

Cannot fire click event on Ext.Button

Thread Tools

Search Thread

Display

Cannot fire click event on Ext.Button

Cannot fire click event on Ext.Button