PDA

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



LiamMcLaughlin
16 Nov 2011, 8:09 AM
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
18 Nov 2011, 4:05 PM
What is the layout of the parent containing component?

LiamMcLaughlin
21 Nov 2011, 2:16 AM
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
25 Nov 2011, 1:31 AM
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.