PDA

View Full Version : Cannot get button to handle onClick



smantscheff
31 Jan 2012, 2:09 AM
I'm trying to get a button to handle a click event. The following works; the handler is pointing to a global function called onClick:

var onClick = function(o) { console.log(o); alert('click'); }
Ext.setup( {
onReady: function() {
var rootPanel = new Ext.TabPanel( { fullscreen: true, items: [
new Ext.form.FormPanel( {
onClick: function(x) { console.log(x); alert('clack') },
items: [ {xtype: 'button', text: 'Click me', handler:onClick} ]
})
]});
}
})

The following does not work; here the handler points to a similar function which belongs to the form. On click, nothing happens - not even an error message on the console. Why is that? There must be some reference error, but which?

var onClick = function(o) { console.log(o); alert('click'); }
Ext.setup( {
onReady: function() {
var rootPanel = new Ext.TabPanel( { fullscreen: true, items: [
new Ext.form.FormPanel( {
onClick: function(x) { console.log(x); alert('clack') },
items: [ {xtype: 'button', text: 'Click me', handler:this.onClick} ]
})
]});
}
})

smantscheff
31 Jan 2012, 2:42 AM
I just found that this works. But there must be another way:

var onClick = function(o) { console.log(o); alert('click'); }
Ext.setup( {
onReady: function() {
var rootPanel = new Ext.TabPanel( { fullscreen: true, items: [
new Ext.form.FormPanel( {
name: 'theForm',
onClick: function(x) { console.log(x); alert('clack') },
items: [
{
xtype: 'button', text: 'Click me',
handler: function(obj) { obj.up('').onClick(obj);}
}
]
})
]});
}
})