Results 1 to 6 of 6

Thread: Sencha Touch - problems adding items

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default 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
    100
      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
      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
    100
      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
      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
      0  

    Default

    anyone?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •