View Full Version : Button handler confusion

17 Oct 2010, 11:07 PM

I have experienced some confusion with button handlers. I'm creating a floating panel which contains a button. After pressing that button, I do a .hide() and .destroy() on the panel to get rid of it.
Later I recreate the same panel (same id, same code). Now the button handler is executed _twice_ on pressing the button. After another destroy of the panel and a third create, the handler is executed three times.

Does anybody know how to avoid this? Is .destroy() on a panel not enough in Sencha Touch? (I believe in ExtJS it was ok).

Thanks and regards,

17 Oct 2010, 11:17 PM
Post your code.

17 Oct 2010, 11:47 PM
Cleaned version:

duo.Login = {
init: function () {
var login = new Ext.Panel ({
id: 'login',
floating: true,
centered: true,
hideOnMaskTap: false,
width: 400,
height: 240,
layout: 'fit',
items: [{
xtype: 'form',
id: 'loginform',
items: [],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
id: 'login_button_submit',
text: 'Login',
ui: 'action',
iconMask: true,
iconCls: 'lock_open',
handler: function () {
alert ('login');
Ext.getCmp ('login').hide ();
Ext.getCmp ('login').destroy ();
duo.doLogin ('xxx');
login.show ();

On loading the page, duo.Login.init() is called to display the login form.
As you can see, the handler on the login button hides and destroys the panel.
duo.doLogin() creates another panel with some UI-elements and a logout button which calls duo.Login.init() to redisplay the login panel.

After logout, when pressing the login button for the second time, the alert() is called twice. On the second time of course, I get a js error, because Ext.getCmp('login') already is destroyed.

Edit: Sencha Touch version used is 0.97

18 Oct 2010, 1:08 AM
Looks like a bug, let me look into it.

18 Oct 2010, 1:12 AM
Thanks a lot!

19 Oct 2010, 4:31 AM
Ok, seems to have a rather simple explanation: The Button does not have any destroy-handling, so listeners seem to stay forever, even after removing and destroying a panel containing a button.