Sencha Touch - problems adding items

[Josie]

Hi everyone!

I'm working with a nestedList inside a tabPanel and I'm putting a Carousel in a detailcard. When someone taps an item of the nestedList it creates a detailcard with xtype "carousel" and then I load my store in order to add items to the carousel dinamically.

Unfortunately, the result is just a white panel.

Here's the part of code that matters:

 detailCard: {
                        //fullscreen: true,
                        id: "myCarousel",
                        xtype: 'carousel',
                    
                        cardSwitchAnimation: 'slide',
                        layoutOnOrientationChange: true,
                        ui: 'light',
                        items: [
                            {
                             style: 'background-color: #333',
                             html: '<div id="loadingScreen"><img src="resources/images/loading.gif" alt="Caricamento in corso" /> Caricamento in corso...</div>',
                            }
                         ],
                        style: 'background: #fff',
                        scrollable: true,
                        styleHtmlContent: true
        
                        },
            
                        listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            var carousel = nestedList.getDetailCard();
                            var itemz = [];
                            var FotoStorez = Ext.create('Ext.data.TreeStore', {
                                model: 'Image',
                                autoLoad: false,
                                defaultRootProperty: ' children',
                                proxy: {
                                    type: 'ajax',
                                    url: 'http://mobile.gossip.it/android/getGallery.php?idgallery='+post.get('id'),
                                    reader: {
                                        rootProperty: 'children'
                                    }
                                }
                                
                            });
                            FotoStorez.load({
                              callback: function(r, options, success)
                              {
                                
                                for (var i=0; i<r.length; i++) {
                                        console.log(r[i].get('title')+' '+r[i].get('file'));
                                        itemz.push({
                                                  / html: '<img width="100%" src=' + r[i].get('file') + '><div class="title">' + r[i].get('title') + '</div>'
                                    });
                                    }  
                                
                               
                              }
                            });  
                               
                                carousel.removeAll();
                                carousel.add(itemz);
                                carousel.setActiveItem(0, true, true);
                         

        
                        }
                  }

I don't think it's a store/model problem because as you can see I've put this line

console.log(r[i].get('title')+' '+r[i].get('file'));

inside the store loop and it's printing exactly what I need.

I tried a carousel.doLayout() but it's not working and I've read on the forums that this function is deprecated in ST2 and, in fact, it gives me an error.

[jerome76]

Yeah you definitely don't want to use .doLayout() anymore.

Try this in Ext.carousel.Carousel's first example code editor and look at the live preview:

Ext.create('Ext.Carousel', {
    fullscreen: true,
    ui: 'light',
    style: 'background: #fff',
    scrollable: true,
    //styleHtmlContent: true,  //if you add this, it adds a margin with the default css
    defaults: {
        styleHtmlContent: true
    },


    items: [
        {
            style: 'background-color: #333',
            html: '<div id="loadingScreen"><img src="resources/images/loading.gif" alt="Caricamento in corso" /> Caricamento in corso...</div>',                 
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
});

It looks to be working with that little piece.

I noticed you do this:

itemz.push({
    / html: '<img width="100%" src=' + r[i].get('file') + '><div class="title">' + r[i].get('title') + '</div>'
});

Why did you add a '/' in there? I'm wondering if that is causing an error you are not seeing?

Also here is your code a little cleaned up; I don't know the whole code you have but from the looks of what you gave, I'm guessing that detailCard is inside your nestedList.

detailCard: {
    //fullscreen: true,
    id: "myCarousel",
    xtype: 'carousel',




    cardSwitchAnimation: 'slide',
    //layoutOnOrientationChange: true, //don't need to do this in ST2.0 either
    ui: 'light',
    items: [
        {
         style: 'background-color: #333',
         html: '<div id="loadingScreen"><img src="resources/images/loading.gif" alt="Caricamento in corso" /> Caricamento in corso...</div>',
        }
     ],
    style: 'background: #fff',
    scrollable: true,
    //styleHtmlContent: true //leave it to default to the carousel's items only
    defaults: {
        styleHtmlContent: true
    },
},//end detailCard


listeners: { //for nestedList
    itemtap: function(nestedList, list, index, element, post) {
        var carousel = nestedList.getDetailCard();
        var itemz = [];
        var FotoStorez = Ext.create('Ext.data.TreeStore', {
            model: 'Image',
            autoLoad: false,
            defaultRootProperty: ' children',
            proxy: {
                type: 'ajax',
                url: 'http://mobile.gossip.it/android/getGallery.php?idgallery='+post.get('id'),
                reader: {
                    rootProperty: 'children'
                }
            }
            
        });
        FotoStorez.load({
            callback: function(r, options, success){    
                for (var i=0; i<r.length; i++) {
                    console.log(r[i].get('title')+' '+r[i].get('file'));
                    itemz.push({
                        html: '<img width="100%" src=' + r[i].get('file') + '><div class="title">' + r[i].get('title') + '</div>'
                    });
                }  
            
           
          }
        });  
        carousel.removeAll();
        carousel.add(itemz);
        carousel.setActiveItem(0, true, true);
    }//end itemtap
}//end listeners

[Josie]

I noticed you do this:

itemz.push({
    / html: '<img width="100%" src=' + r[i].get('file') + '><div class="title">' + r[i].get('title') + '</div>'
});

Why did you add a '/' in there? I'm wondering if that is causing an error you are not seeing?

Ooops! I must have added it while pasting the code to the forum, I don't have the slash in my code so that's not the problem

Also here is your code a little cleaned up;

Trying your cleaned up code it gives me this error when I tap on an item:

ReferenceError: Can't find variable: myCarousel at file:///android_asset/www/app/index.js:250

Line 250 says

}//end itemtap

and this is kinda crazy because myCarousel is only referenced as "id" property of the carousel.

[jerome76]

I can't see your whole code so you may have a misplaced curly brace somewhere. That is all I can think of.

[Josie]

I can't see your whole code so you may have a misplaced curly brace somewhere. That is all I can think of.

I've solved the curly brace problem and now I'm using your code in the detail card. Anyway the problem is still the same: it's like it's not adding the items to the carousel because I just see a white page instead of the carousel.

[Josie]

anyone?