[1.1.1](phonegap 1.2) Rendering issue panel setActiveItem is called in iOS simulator

[LiamMcLaughlin]

Hi

I'm following the tutorial on getting started using Sencha Touch with Phonegap here;
http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/

Functionally the example is working fine, however there is problem with the rendering of the viewport when the setActiveItem is called, it looks like this;
29337
Its as if two panels are being rendered on top of each other. Is there some obvious coding error that could cause this sort of issue? I tried replicating it with the version in the git repo, but I couldn't get it to work with a phonegap 1.2 xcode project.

Any pointers would be gratefully received.

[mitchellsimoens]

What is the layout of the parent containing component?

[LiamMcLaughlin]

Hi Mitchel,

Thanks for replying.

The parent containing component is set as 'card', its the master viewport. The code looks like the following.


app.views.Viewport = Ext.extend(Ext.Panel, { fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
contactsList: new app.views.ContactsList(),
contactDetail: new app.views.ContactDetail(),
contactForm: new app.views.ContactForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.contactsList,
app.views.contactDetail,
app.views.contactForm,
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

[LiamMcLaughlin]

Edit: Ignore the red.. It was using two different transition effects that caused the problem to go away, not the container.

Ok,

Found the fix, if anyone comes across this problem in the future. The issue goes away if the panel with the layout 'card' is called inside a container panel with the layout type 'fit'. So to fix my example above;



app.views.Container = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'fit',
initComponent: function () {
Ext.apply(app.views, {
viewport: new app.views.Viewport(),
});
Ext.apply(this, {
items: [
app.views.viewport
]
});
app.views.Viewport.superclass.initComponent.call(this)
}
});


Call the above container rather than the viewport if you want to use the card layout.