1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    nize is on a distinguished road

      0  

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

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


    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 ):

    Code:
    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:

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

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

    Screenshot from running in browser (using iPhoney):

    Sk&#228;rmavbild 2012-09-24 kl. 14.07.00.png

    Screenshot from running in iOS Simulator:

    Sk&#228;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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

    Are you talking about the fonts too?

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    nize is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    nize is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    nize is on a distinguished road

      0  

    Default


    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?

Thread Participants: 1

Tags for this Thread