PDA

View Full Version : Problem Toolbar's Button' Listeners after removeAll()



TDeBailleul
6 Nov 2011, 12:12 PM
Hi everyone,

I have a problem with the following function



updateToolBar : function(){
var toolbar = app.views.viewport.bottomTabs.actualites.getDockedItems()[0];
toolbar.removeAll();
toolbar.setTitle("Actualites");
toolbar.add(this.resetBtn);
toolbar.add({xtype:'spacer'});
toolbar.add(this.newBtn);
toolbar.doLayout();
},


This function is called when I click on the back button of a panel. It removes all components of the toolbar as expected and then add new button to it. But my buttons' listeners won't work.

Here are my buttons :



this.resetBtn = new Ext.Button({
text: 'Exit',
ui: 'reset',
listeners: {
'tap': function () {
app.views.viewport.resetLogin();
}
}
});

this.newBtn = new Ext.Button({
text: 'Nouveau',
ui: 'action',
listeners:{
'tap': function(){
Ext.dispatch({
controller: app.controllers.actualites,
action: 'create'
});
}
}
});


I'm wondering if it is the best way to remove all components from a toolbar ?
Does anybody know how to fix this ?

Thanks

AndreaCammarata
7 Nov 2011, 1:02 AM
Hi,
I don't see any problems in your code.
If you try to show an alert inside your new buttons tap listener just before the rest of the code, is it showed?

I wrote you a simple example to show you that your code should works fine because it's really similar
to yours:



Ext.setup({
onReady: function() {


var changeButtons = function(){
var toolbar = pnl.getDockedComponent(0);
toolbar.removeAll();
toolbar.setTitle('After adding buttons');
toolbar.add(newButton1);
toolbar.add(newButton2);
toolbar.doLayout();
};

var newButton1 = {
text: 'New Button 1',
handler: function(){
alert('I\'m New');
}
};

var newButton2 = {
text: 'New Button 2',
handler: function(){
alert('I\'m New Too');
}
};


var pnl = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
xtype: 'toolbar',
title: 'Before adding Buttons',
items: [
{
text: 'Hello',
handler: function(){
alert('Hello');
}
},
{
text: 'Bye',
handler: function(){
alert('Bye');
}
},
{
xtype: 'spacer'
},
{
text: 'Change Buttons',
ui: 'action',
handler: changeButtons
}
]
}
]
});


}
});


Please do the alert test and let me know.

Hope this helps.

TDeBailleul
7 Nov 2011, 4:04 AM
Thanks for you help, but I still can't figure out why it doesn't work. You example works fine though, and the alert test didn't help as the alert didn't show up...

Maybe it'd be better if I clarify the problem.

2908029081

When I click on the 'compose' button it goes to the panel on the right (the listener is working). But when I come back to the first panel with the back button, I can't click on the 'compose' button anymore...

Hope somebody find a solution or give me a better way to update the toolbar's components.

mitchellsimoens
7 Nov 2011, 7:56 AM
This looks to be because you are using removeAll on your toolbar which can destroy your button. Then you are re-adding it to the toolbar.

TDeBailleul
7 Nov 2011, 8:06 AM
What is wrong with that method ?

mitchellsimoens
7 Nov 2011, 8:08 AM
What is wrong with that method ?

The buttons you removed are destroyed. You can pass a boolean argument to auto destroy the component or not.

TDeBailleul
7 Nov 2011, 12:22 PM
Well, I must say I don't understand this autoDestroy thing, because either
- I create my toolbar with autoDestroy : true and then the buttons are removed when the view changes but their handlers don't anymore
Or
- I create my toolbar with autoDestroy : false and then the buttons are not removed from the toolbar when the view changes but their handlers do...

I'm confused