Button events not working, only handler

[jiancha]

Hello,
Here is my example code:



Ext.application({
launch : function() {
var b = Ext.create('Ext.Button', {
text : 'Btn',
//fullscreen: false,
centered: true,
renderTo : Ext.getBody(),
width: 70,
height: 70,
id: 'btn1',
handleMouseEvents: true,

afterRender: function(){
Ext.getCmp('btn1').on('mouseover', function(event, el){
alert('mouseover in afterRender');
});
},

handler: function(){
alert('clicked in handler!');
},

listeners : {
click : function() {
alert('I was clicked in listeners!');
},

'mouseover': function() {
//set a new config which says we moused over, if not already set
if(!this.mousedOver) {
this.mousedOver = true;
alert('mouseover in listeners 1 !');
}
},//This is not working

mouseover: function() {
//set a new config which says we moused over, if not already set
if(!this.mousedOver) {
this.mousedOver = true;
alert('mouseover in listeners 2!');
}
}
},
});

Ext.getCmp('btn1').on('click', function(){
alert('I am clicked in on!');
});
Ext.getCmp('btn1').on('mouseover', function(){
alert('I am mousseovered in on');
});
}
});




this code works fine in online portal. I use chrome browser with version 15.0.874. but It didn't work on chrome, only handler fires when I clicked on it.
Questions:
1) if I dont set config option 'fullscreen', whether false or true, I can't see the button on chrome.
2) Some examples show me
mouseover: function() {} and others show
'mouseover': function() {}, but both not working for me on chrome

can someone help on it ?

thanks,

[tobiu]

events are no direct configs, you need to specify them in a listeners object like:



listeners: {
render: ...
}


or afterwards with 'on'.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable

[jiancha]

thanks,

but I did use listeners and it works on portal, but it does not work for me on my browser.

[skirtle]

You can't specify both mouseover and 'mouseover' at the same time. They're effectively the same thing and you can't have duplicate keys (property names) in an object.

When I tried your code in Chrome it worked fine. I saw pop-up messages for all the handlers apart from 'mouseover in listeners 1 !', which didn't work because of the duplicate property name.

By the way, which framework are you using? This is the ExtJS 4 forum but fullscreen and centered are both Touch config options.

[jiancha]

ok, I used wrong framework, now it works for me too

thanks a lot !