PDA

View Full Version : Change title of docked toolbar



Vinzcent
15 Feb 2011, 5:57 AM
Hi,

I would like to change the title of the toolbar that is docked in a panel.
For example, when a user taps an element of a list, the toolbar title should have to change from 'My app' to 'Item selected'.

I tried this, but it didn't work

detailPanel.dockedItems[0].setTitle('Item selected');


How do i do this?


This is the code of my panel


var detailPanel = new Ext.Panel({
title: 'Detail',

dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'My app'

}],

tpl: new Ext.Template([
'<div name="{id}">',
'<span>{text}</span>',
'</div>'
])
});

And this is my list

var listPanel = new Ext.Panel({
title: 'All Posts',
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Vincent Winckelmans'

}],

items: [list]
});

list.on('itemtap', function(dataView, index, item, e){
detailPanel.dockedItems[0].setTitle('Item selected'); //This doesn't work


});


Thanks,
Vincent

Vinzcent
16 Feb 2011, 5:52 AM
It works this way, but this is probably not a good solution


list.on('itemtap', function(dataView, index, item, e){
mainPanel.setActiveItem(1);


detailPanel.removeDocked(detailPanel.dockedItems.items[0]);
detailPanel.addDocked(
{
dock : 'top',
xtype: 'toolbar',
title: list.getRecord(list.getNode(index)).data.title,
items: [
new Ext.Button({
ui : 'back',
text: 'Back',
handler: function(b, e){
mainPanel.setActiveItem(0, {type: 'slide', direction: 'right'})
}
})
]

}
);
});

dac0nvu
16 Feb 2011, 1:13 PM
Try this:


detailPanel.dockedItems.items[0].setTitle('Item selected');

Vinzcent
18 Feb 2011, 9:14 AM
Thank you! This works