Problem removing dockeditem from TabPanel on iPhone

[pellyadolfo]

I am having an issue for 2 days and so far no luck. I intend to add/remove a top dockeditem holding iAd adverts to my TabPanel. I want to 'add' when there is connection on the device (iPhone with phonegap) and 'remove' when there is not.

Some code snippets isolating the issue:

The static part, declaring the TabPanel with a test item and its corresponding tabBar.


Ext.setup({
statusBarStyle: 'black',
onReady: function() {
com.vaalbara.App = new com.vaalbara.App({});
}
});


com.vaalbara.App = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'auto',
scroll: false,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
cardSwitchAnimation: false,
initComponent: function() {
this.items = [{
html:'test html',
iconMask: true,
iconCls: 'home'
}];
com.vaalbara.App.superclass.initComponent.call(this);
}
});
Ext.reg('App', com.vaalbara.App);

The script in the html page which adds and remove the dockeditem to previous tabpanel.


if (navigator.onLine)
addAdsAndSpace();
else removeAdAndSpace();

function addAdsAndSpace() {
com.vaalbara.App.addDocked({
html: '<iframe src =\"\" width=\"100%\" height=\"50\" frameBorder=\"0\" scrolling=\"no\"></iframe>',
id: 'advertTab',
border: false,
dock: 'top',
scroll: false
});
window.plugins.iAdPlugin.showAd(true);
}
function removeAdAndSpace() {
window.plugins.iAdPlugin.showAd(false);
var advertTab = com.vaalbara.App.getDockedComponent('advertTab');
if(advertTab != null) {
com.vaalbara.App.removeDocked(advertTab, true);
/*com.vaalbara.App.body.setStyle({
top: 0, //top + tb.thisHeight + "px",
height: height + 50 + "px"
);*/
com.vaalbara.App.doComponentLayout(/*width, height*/);
}
}


As shown in the picture below, 'add' works great. The problem basically is that, on 'remove'ing the docked item, I am not able to instruct the TabPanel to resize and get rid of the white space.


30464

I have tried all kind of combinations, setStyle, specifying width and height in doComponentLayout, do Layout, destroy manually.... but nothings seems to work ok.

30465



The setStyle actually moves the center 'test html' item to the space left by the removed advert on top but, in that case there is a blank space between the 'test html' item and the bottom navigation bar.

I have also tried to add the listeners proposed here (http://www.sencha.com/forum/showthread.php?150658)but TabPanel does not seem to call those listeners in any case.

Any help or pointer would be really appreciated as I am really stuck with the issue and I do not think it would be approved in the AppStore leaving the white space as is.

I decided to add the dockeditem to hold the advert after running in the same issue reported here (http://groups.google.com/group/phonegap/browse_thread/thread/2980f33a4d99af09/8a61782c04c50075?lnk=gst&q=iad#8a61782c04c50075) so, I think, this thread, can be a good example of using iAd in Sencha. I have not found any other 'Hello Adverts World' in Sencha. However, I think that, adverts, are not really relevant for the issue.

Thanks.

[mitchellsimoens]

doComponentLayout should resize things. You will need to do it on the parent panel of the docked item you are removing.

[pellyadolfo]

Well, this what I think I am doing, is not it?. Assuming that the hierarchy is like that:

com.vaalbara.App (TabPanel parent)
* dockedItem containing advert on top
* item 'test html' (active tab)
* dockedItem containing navbar on bottom

com.vaalbara.App has not parent itself.

All the operations are carried out on the parent com.vaalbara.App including the doComponentLayout:

com.vaalbara.App.addDocked( ***** item ***** ); OK
com.vaalbara.App.removeDocked(advertTab, true); OK
com.vaalbara.App.doComponentLayout(); No OK

I am working on 1.0.0 but also tried 1.1.0 and 1.1.1 and same results: Cannot tell the item to resize and use the space taken before by the advert.

In my opinion this is a bug. Any similar experience?

[mitchellsimoens]

This works no problem in 1.1.1:


var panel = new Ext.Panel({
fullscreen : true,
layout : 'fit',
items : [
{
xtype : 'panel',
html : 'Test',
dockedItems : [
{
xtype : 'toolbar',
dock : 'bottom',
title : 'Bottom Toolbar'
}
]
}
],
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
title : 'Remove Me',
items : [
{
text : 'Remove this toolbar',
handler : function(btn) {
var toolbar = btn.up('toolbar');

panel.removeDocked(toolbar);
}
}
]
}
]
});

Didn't even need to call a layout change.

[pellyadolfo]

Hi Mitchel,

thanks for this working use case. It helped me to find the problem.

I tested yours and, yes, it worked. So I compared differences with my code.

The difference between your case and mine was this line:

panel.removeDocked(advertTab, true);
vs
panel.removeDocked(advertTab);

By some reason, when the second argument is specified in the removeDocked, it shows the behaviour exposed by me above. I have even tested your use case and it also fails showing the behaviour above if we use the second boolean argument in removeDocked function. For both 1.0.0 and 1.1.1.

But, this one was the fix. Just changed my code to:

panel.removeDocked(advertTab);

and it works like a charm now.

Maybe there is a bug in this removeDocked when using 2 arguments (?).

Thanks for your support, it made the trick. ;-)

Adolfo