Panel does not resize after hiding toolbar docked at the bottom

[sench23]

Hello,
I have a panel that holds some components, and a toolbar docked at the bottom. After hiding the toolbar, panel does not resize when i call doLayout() or doComponentLayout().
Any suggestions what I am doing wrong?

_mainDetailsToolbar = new Ext.Toolbar({ dock: 'bottom', ui: 'light', style: { background: '#ffffff' },
layout: { pack: 'center', align: 'center' },
items: [{ xtype: 'panel', html: dfx.fn.getDetailsAd('html'), width: 297, height: 47,
style: { background: '#ffffff'}}], border: 0
});


_mainDetailsCard = new Ext.Panel({
layout: 'fit',
fullscreen: true,
useToolbar: false,
style: { background: 'url("Images/dailyfx-bg.jpg") center 40px repeat' },
title: 'Details content',
updateHtml: function(content) {
this.updateComponent(
new Ext.Panel({
cls: 'container',
items: [
{ xtype: 'panel', html: content, cls: 'container', layout: 'fit', style: { fontSize: '0.7em'} }
]
}));
},
updateComponent: function(cmp) {
_mainDetailsCardContent.removeAll();
_mainDetailsCardContent.update('');
_mainDetailsCardContent.add(cmp);
_mainDetailsCardContent.doLayout();
},
items: [
// removed
],
dockedItems: [
_mainDetailsToolbar // after hiding it, _mainDetailsCard does not resize after calling doLayout() nor doComponentLayout()
]
});

Thanks,
Aleksandar

[gcallaghan]

search the forums, there has already been some discussion on how to accomplish this and the reasons for it.

see
http://www.sencha.com/forum/showthread.php?121964-Show-and-Hide-Docked-Items.

[sench23]

Hi gcallaghan,

Thank you for replying. I did see that thread you sent me, but I'm having some problems getting the component with Ext.getCmp() method - it returns 'undefined' constantly, can you please help?
Here is the code, at some point I am updating a card of some panel, passing the element as an argument:

_mainDetailsCard.updateComponent(new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [
// panel 'a'
new Ext.Panel({
layout: 'fit',
id:'panA',
items: [
{ html: r,
style: { background: '#ffffff' },
scroll: 'vertical',
layout: 'fit'
}
],
dockedItems: [
new Ext.Toolbar({
height:_settings.ui.defaultTabBarHeight,
dock: 'bottom',
defaults: { handler: liveNewsDetailsHandler },
items: [
{ html: "<img src='Images/twitter.png' style='height:16px;width:16px;' alt='Twitter' />", cls:'toolbar-button' },
{ xtype: 'spacer' },
{ text: 'Email', cls:'toolbar-button' }
]
}),
{
xtype: 'panel',
id: 'banerAd',
dock: 'bottom',
html: dfx.fn.getDetailsAd('html'),
width: 297,
height: 47,
style: { background: '#ffffff' }
}]
})// end of panel 'a'
]
})
);

I want to manage visibility of that 'banerAd' panel.

Thank you in advance,
Aleksandar

[gcallaghan]

Ext.getCmp('somID') may need the component to be rendered in order to return a value. When you use it to get 'panA' is that component visible?

Can you post some runnable code? maybe even strip it down to a smaller example? Its kind of hard to say whats going wrong with such a small subset.

Some general comments on the structure,

1. I would use a custom Class to contain the configuration of Ext.Components. You have quite a lot of inline code. That is always a pain to debug.
2. It is ok to do simple inline code within items, but i would use {xtype:'panel'...} method for definition. You seem to go back and forth.