Can you dymanically edit the dockedItems?

[rballman]

Hello,

I have a tabpanel with a dockedItems docked at the top. Initially it only has text in the dockedItems, but is there a way to dymanically edit the dockedItems? I would like to add a Back button to it and them remove it as well, later in the application.

Thanks.

[AndreaCammarata]

Hi rballman.
yes you can dinamically add new dockedItems.
Take a look at this example



Ext.setup({
onReady: function() {

var btnToAdd = new Ext.Button({
text: 'Simple Button'
});

var pnlMain = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
title: 'Example',
itemId: 'mainToolbar',
items: [{
text: 'Add Button',
handler: function(){
var tb = pnlMain.getDockedComponent('mainToolbar');
tb.add(btnToAdd);
tb.doComponentLayout();
}
},{
xtype: 'spacer'
}]
}],
html: 'Simple Example'
});
}
});


After adding a new component, remember always to call "doComponentLayout" function.
Hope this helps.

[rballman]

perfect, thanks!

in your example is there a way to remove the button as well?

[AndreaCammarata]

To remove the button simple call


var tb = pnlMain.getDockedComponent('mainToolbar');
tb.remove(btnToAdd);
tb.doComponentLayout();


I suggest you to take a deep look into the API docs ;)
Hope this helps.

[rballman]

yeah sorry. It wouldnt let me edit my post for some reason. anyhow I figured it out :)

I was able to delete the button but It wouldnt let me readd it. adding the following fixed it:


tb.doLayout();

[lilford.immanuel]

Adding and removing works just right.. :)

When i try to add an removed item it does not show up.. :(

I tried setting autoDestroy to true and false with not effect../:)

What should I do??

[heringsfilet]

I'm new to Sencha Touch and Javascript but maybe this is because the component has been destroyed and you probably need to reinstantiate it?