PDA

View Full Version : activeButton on toolbar doesn't work



directx0000
16 Sep 2010, 5:41 AM
Hi everyone. I have noticed that the activeButton property does not seem to work with tool bar items. I've also tried activeItem but to no avail. In some of the examples in Sencha, activeButton was specified but when running the specified button is not depressed. Is this a bug? Thanks..

// snippet below does not work
var mappanelicons = [{
activeItem: 0,
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: 'Attractions',
handler: mappaneliconshandler
},
{
text: 'Groups',
handler: mappaneliconshandler
}],

}];

var mappaneltoolbar = new Ext.Toolbar({
xtype: 'toolbar',
activeButton: 0,
activeItem: 0,
//ui: 'light',
items: mappanelicons,
dock: 'top',
layout: {
pack: 'center'
}
});

tfrugia
30 Sep 2010, 1:22 PM
I noticed this as well. On 0.95 the actual syntax is to put active: true on the active button, ie:



var mappanelicons = [{
xtype: 'splitbutton',
items: [{
text: 'Attractions',
active: true,
handler: mappaneliconshandler
},{
text: 'Groups',
handler: mappaneliconshandler
}]


This will make the first button active.

Btw, put your code in [CODE] tags when posting code, please.

djkraz
30 Sep 2010, 2:07 PM
active: true has been replaced with pressed: true and/or activeItem: x on a SegmentedButton group however something in the toolbar initialization process is causing it to get depressed. If you monitor the toggle handler for a SegmentedButton group you will see that the button that you default to pressed: true gets a toggle event call for it though it is only to toggle it off, never to turn it on even though you chose to default it on. Also, the toggle handler's arguments have changed even though the doc's do not reflect it so keep this in mind when testing. The first arg is now button and the second is pressed instead of the 2nd and 3rd args respectively. I really hope someone can come up with a workaround soon as this is a pretty serious issue...

sample code to reproduce and see console output:

Ext.setup({
fullscreen: true,
glossOnIcon: false,
onReady: function() {
var oButtons = new Ext.SegmentedButton({
allowMultiple: false,
activeItem: 0,
defaults: {
ui: 'plain'
},
items: [
{
text: 'Newsfeed',
pressed: true,
key: 'sources'
}, {
text: 'Conversations',
key: 'my-conversations'
}
],
listeners: {
toggle: function(button, pressed) {
console.log(button);
console.log(pressed);
}
}
});

var oToolbar = new Ext.Toolbar({
dock: 'top',
layout: {
pack: 'center'
},
items: [oButtons]
});

var oPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
dockedItems: [oToolbar],
items: []
});
}
});