1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    Josie is on a distinguished road

      0  

    Default Unanswered: Sencha Touch - problems adding items

    Unanswered: Sencha Touch - problems adding items


    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:

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

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

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    Josie is on a distinguished road

      0  

    Default


    Quote Originally Posted by jerome76 View Post
    I noticed you do this:
    Code:
    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

    Quote Originally Posted by jerome76 View Post
    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
    Code:
    }//end itemtap
    and this is kinda crazy because myCarousel is only referenced as "id" property of the carousel.

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    Josie is on a distinguished road

      0  

    Default


    Quote Originally Posted by jerome76 View Post
    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.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    Josie is on a distinguished road

      0  

    Default


    anyone?

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi