PDA

View Full Version : toolbar.add() / toolbar.remove() problem



Andrel
27 Oct 2010, 2:28 PM
Hi there, I noticed a strange behaviour on Sencha Touch 0.97 and 0.98.

First let me show you my code:



var toolbarHandler = {
activate: function(panel){
id = panel.id;

var myHeadToolbar = Ext.getCmp('headToolbar');

if(id == "news") {
myHeadToolbar.setTitle('News');

}else if(id == "videos"){
myHeadToolbar.setTitle('Podcast');

var info = Ext.getCmp('infoButton');
var locate = Ext.getCmp('locateButton');
var mySpacer = Ext.getCmp('spacer');

alert(mySpacer);
myHeadToolbar.removeAll();
alert(mySpacer);

myHeadToolbar.add(backButton);
alert(mySpacer);
//myHeadToolbar.doLayout();
myHeadToolbar.add(mySpacer);
//myHeadToolbar.doLayout();
//myHeadToolbar.add(locate);
myHeadToolbar.doLayout();
}

//remove_back();
}
};

var news = {
xtype: 'panel',
id: 'news',
iconCls: 'bookmarks',
title: 'News',
layout: 'card',
html: 'News',
listeners: toolbarHandler
};

var videos = {
xtype: 'panel',
id: 'videos',
iconCls: 'favorites',
title: 'Videos',
layout: 'card',
html: 'Videos',
listeners: toolbarHandler
};

/* HeadButtons and Toolbar */

var backHandler = function(){
//
};

var locateButton = {
id: 'locateButton',
dock: 'right',
iconCls: 'locate',
iconMask: true,
ui: 'plain',
handler: showMap
};

var spacer = {
id: 'spacer',
xtype: 'spacer'
};

var infoButton = {
id: 'infoButton',
dock: 'left',
iconCls: 'info',
iconMask: true,
ui: 'plain',
handler: showOverlay
};

var backButton = {
id: 'backButton',
dock: 'left',
iconCls: 'arrow_left',
iconMask: true,
ui: 'plain',
handler: backHandler
};

var headToolbar = {
id: 'headToolbar',
xtype: 'toolbar',
title: 'Toolbar Title',
dock: 'top',
ui: 'light',
items: [
//backButton,
infoButton,
spacer,
locateButton
]
};

/* HeadButtons and Toolbar end */

/* mainPanel */

mainPanel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
cls: 'MainCard',
dockedItems: headToolbar,
items: [
news,
videos
]
});
/* mainPanel end */


The full thing is run inside Ext setup onReady function. What I want to do is, having different Title and Buttons for different cards. I try to accomplish this by having the toolbaHandler as a listener for changing cards. Inside toolbaHandler i fetch the Top Toolbar Object, remove all Buttons and add new ones. But here it stops working as expected.

I can remove all existing Buttons and the spacer with toolbar.removeAll(); then I can add a new Button (back) by toolbar.add(back); after toolbar.doLayout(); the changed Toolbar is visible without the old buttons and only with the new button. But it doesn't work when I try to add another Button. The only thing I try to do is change the title (which works without problems) and change the infoButton with the backButton (and backwards when on another card).

So my question is, how can I reach this behaviour instead, or am I on the right way and this is just a Bug?

Also I notized, that the dock option ('left', 'right') has at the moment no effect to the buttons, the only thing that effects their positioning on the toolbar is the order they are added.

Andrel
28 Oct 2010, 10:43 AM
Hi there, anyone out there having an ideale or sharing the same Problem?