Sencha Touch 2.0 - Carousel items not showing properly in native iOS

[nize]

Hello!

I'm having a strange issue with a carousel that I am loading from a store that is filled with data coming from a JSONP resource.

The store gets filled and my code for filling the carousel runs, and the items gets added to the carousel as expected. When I try the app in a browser, everything works great. But when I build the app and test in the iPhone simulator, all the carousel items gets stacked on top of each other and I cant swipe the carousel. The indicator shows the correct amount of slides but I can't navigate around in it, it's like everything is showed in the same area.

My "fill" code (this is currently running directly in the launch-function in app.js, will get moved to a controller once I get it functional... And figure out how to do a controller ):

Ext.getStore('Mat').load(function(data) {            
            var items = [];
            
            Ext.each(data, function(data) {
                
                if (!data.get('date')) {
                    return;
                }
                
                var str_matratter = data.get('content');
                str_matratter = str_matratter.replace(',', '</li><li>');
                str_matratter = '<li>' + str_matratter + '</li>';
                
                items.push({
                    html: '<div><div class="start-loggedin-dagensmat-left"><h2>Matsedel<br />' + data.get('date') + '</h2></div><ul>' + str_matratter + '</ul></div>'
                });
            });
            
            carousel.setItems(items);
            carousel.setActiveItem(0);
        });

I've tried both carousel.add() and carousel.setItems(). The variable carousel is set and instanciated at the top of my View file. I've also tried specifying xtype: 'panel' and 'container' in the pushed item.

Here is two excerpts from my View which contains the carousel:

At the top:

var carousel;

carousel = Ext.create('Ext.Carousel', {
    ui: 'light',
    cls: 'start-loggedin-dagensmat-list',
    height: 120
});

Further down:

{
xtype: 'container',
cls: 'start-loggedin-dagensmat',
height: 120,
items: [ carousel ]
},

Screenshot from running in browser (using iPhoney):

Skärmavbild 2012-09-24 kl. 14.07.00.png

Screenshot from running in iOS Simulator:

Skärmavbild 2012-09-24 kl. 14.07.14.png

Please excuse the swedish in the screenshots

Thankful for all the help I can get with this issue!


Sincerely, Daniel

[jay@moduscreate.com]

Makes sense. You have the extra bar on the bottom from mobile safari, but that's abstnt.

Are you talking about the fonts too?

[nize]

I'm sorry, but I don't understand what about this makes sense. Please elaborate what I'm doing wrong if this is the expected result.

I don't worry about the fonts for now. They are included using @font-face and I haven't gotten it to work in native but that is secondary and not critical.

And as You say, the extra bar is because iPhoney simulates iOS Safari.

[nize]

I would really appreciate if someone would give me some pointers as to what I am doing wrong here. Everything else is working as expected and the carousels are showing up just fine in Safari on desktop. I have partially followed this example by Ed Spencer:

http://edspencer.net/2012/02/buildin...a-touch-2.html

But obviously something needs to be adjusted for it to run properly on native.

[nize]

Still having problems with this. Anyone have any ideas if I could rebuild this using some other logic that would work better on native iOS?