Yes the difference is that I have a panel where I create a carousel and add panels to that carousel's items so that I can swipe the items. It works on Android, but when I run on the iPhone it works in the beginging, but when I navaigate to another page and come back the carousel it is now blank. I tried chaning the HTML content og both the panel and the carousel panel and I can see the HTML, but the panels that I added are not rendering.

the Model

/**
        *@class GS.model.inspirationModel
        *@extends Ext.data.Model
        *
        *
        *
        */
        Ext.define('GS.model.inspirationModel',{
        extend:'Ext.data.Model',
        config:{
                idProperty:'id',
                fields:[
                        {name:'Inspiration_Type__c', type:'string'},
                        {name:'Message__c', type:'string'},
                        {name:'Id', type:'string'},
                        {name:'Author__c',type:'string'},
                        {name:'Author__r.Name',type:'string'},
                        {name:'message',
                            convert:function(value,record){
                                var st = record.get('Message__c');
                                 if (st != null && st.length > 45){
                                    var returnString =st.substring(0,45) + '...';
                                    return returnString;
                                 }
                                 else{
                                    return st;
                                    }
                                
                            }
                        },
                        {name:'authorName',
                            convert:function(value,record){
                                var st = record.get('Author__r.Name');
                                return st;
                            }
                            
                            
                       }
                        
                    ],
                     proxy:{
                    type:'direct',
                    api:{
                        read:mobileController5.QueryInspirations,
                        create:mobileController5.Add,
                        update:mobileController5.Edit,
                        destroy:mobileController5.Destroy
                    },
                    limitParam:'recordCount',
                    sortParam:'sortParams',
                    pageParam:false,
                    reader:{
                        type:'json',
                        rootProperty:'records',
                        messageProperty:'errorMessage'
                    },
                    writer:{
                        type:'json',
                        root:'records',
                        writeAllFields:false,
                        allowSingle:false,
                        encode:false
                    }
                }
            }
        });

 the store

      /**
        *@class GS.store.inspirationStore
        *@extends Ext.data.Store
        *
        *
        *
        */

        Ext.define('GS.store.inspirationStore',{
        extend:'Ext.data.Store',
        requires:"Ext.data.proxy.LocalStorage",
        config:{
            model:'GS.model.inspirationModel',
            autoLoad: true
            }
        });

 the View where I create the carousel and add panels to the carousel's items and then add the carousel to the main panel to be rendered.

initialize:function( me, eOpts ){
                var store = Ext.getStore("inspirationStore");
                console.log("start making the inspirations" + store.getCount());
                var car = Ext.create('Ext.Carousel', {
                        store: 'inspirationStore',
                        direction: 'horizontal', 
                        padding:'0 0 0 0',
                        height:100
                });        
                var itemsArray = new Array();
                for (var i = 0; i < store.getCount(); i++){
                    itemsArray[i] = Ext.create(
                        'Ext.Panel',{
                            html:'<p class = "inspirationMessage"><b>'+ store.getAt(i).data.message + '</b></p>' + '<p class = "authorName"><b>' + store.getAt(i).raw.Author__r.Name + '</b></p>',
                            cls:'carouselPanel'
                         }
                    );
                 }; 
                car.setItems(itemsArray);
                car.setActiveItem(0);                                 
                var carouselPanel = Ext.getCmp('carouselPanel');
                carouselPanel.setItems(car);
            

 This is how I define the panel to be rendered.

xtype: 'panel',
                   id: 'carouselPanel',
                   padding:'0 0 0 0',
                   height:100   

 Thanks for your help. I really apppreciate it.