1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    48
    Vote Rating
    0
    Shijutv is on a distinguished road

      0  

    Default Problem with dynamic carousel

    Problem with dynamic carousel


    Hi,

    I have a question about carousel. I have a carousel and I'd like create its cards with real time data loaded from a server. The number of cards is unknown and determined by the real time data.
    At first i have 2 cards . When i switch to next card , it will generate a JSON request and it updates the carousel .

    But it is not working properly because i want to show the second card. it shows the third card
    Problem is it removes the default 2 cards .

    My code is below
    carouselPhotoListView = new Ext.Carousel({
    items: iGallery.stores.PhotoListCarouselViewItems,
    layout: 'card',
    listeners: {
    beforecardswitch : {
    fn: function(obj,newCard,OldCard,index,bool){
    loadNext12Photos(albumId);
    }
    }
    }
    });

    var loadNext12Photos = function(id){
    Ext.getBody().mask('Loading...', 'demos-loading', false);
    Ext.util.JSONP.request({
    callback: function(result) {
    iGallery.stores.PhotoListCarouselViewItems.push({result.data1})
    Ext.getBody().unmask();
    carouselPhotoListView.add(iGallery.stores.PhotoListCarouselViewItems);
    carouselPhotoListView.doLayout();
    }
    }

    Thank you in advance!

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    Ryan Watkins is on a distinguished road

      0  

    Default


    I have the same issue. I can render the carousel initially and even populate it dynamically, but am unable to successfully have it render a new set of items.

    I've attempted carousel.removeAll(), and then carousel.add(items). But in all cases the carousel will create the necessary items but not render them.

    I intialize the carousel with an empty item array, and then later call carousel.add(items) and it works - the first time. But not subsequent times for this same carousel. I can see the dots for the correct number of items, and can slide between the pages, but the contents of each page do not render.

    This repros Chrome, Safari and Mobile Safari. Sencha Touch 1.1.0.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    brett.gates is on a distinguished road

      0  

    Default Same goes for me...

    Same goes for me...


    I am being paid for this project and dev has stopped because I do not know how to get past this. Even better if you look at the console and drill down into the carousel the cards show the correct content. Just does not render it on the screen.

    Code:
     	buildCarousel: function(){
    	 	var item_object = DataUtils.item_object(this.selectedListId, this.selectedItemId);
    	 	console.log(item_object);
     		if(item_object){
     			var container = Ext.getCmp('Entries_Container');
     			
    			var m = item_object.metadata;
    			var name = m.name;
    			container.dockedItems.items[0].setTitle(name);
    			container.dockedItems.items[0].doComponentLayout();
    			
    // Build the Header
    			var aHTML = [];
    			if(m.requirements.require_min == 0){
    				aHTML.push("optional<br />");
    				aHTML.push(item_object.completed.completed_order.length.toString() + " completed entries.");
    			}
    			else {
    				aHTML.push("Minimum entries required: " + m.requirements.min.toString());
    				aHTML.push("<br />Number of completed entries: " + item_object.completed.completed_order.length.toString());
    			}
    			container.dockedItems.items[1].html = aHTML.join("\r\n");
    			container.dockedItems.items[1].doComponentLayout();
    			
    			container.items.removeAll();
    //Build the Carousel
    			this.carouselCount++;
    			var carousel = new Ext.Carousel({
    				layout: 'card',
    				id: 'Entries_Carousel_' + this.carouselCount
    			});
    			container.carouselId = carousel.id;
    			
    			var items = [];
    			for(var i = 0; i < item_object.completed.completed_order.length; i++){
    				var completedId = parseInt(item_object.completed.completed_order[i]);
    				var completed_object = DataUtils.completed_object(this.selectedListId, this.selectedItemId, completedId);
    //var cItem = new Ext.Panel({html: App.views.Entries.prototype.completedEntryViewHTML(completed_object)});
    				var cHTML = container.completedEntryDisplayHTML(completed_object);
    				var card = new Ext.Panel({
    					scroll: 'vertical',
    					html: cHTML
    				});
    				items.push(card);
    			}
    			carousel.add(items);
    			carousel.doComponentLayout();
    			container.add(carousel);
    			container.doComponentLayout();
    		}
    			
     	}
    The title on the toolbar does change.

    HELP!!!

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    Ryan Watkins is on a distinguished road

      0  

    Default


    I've resolved this - unfortunately by using a timeout.

    So I call carousel.removeAll();

    Then setTimeout(function() {
    carousel.add(items);
    carousel.doLayout();
    }, 10);

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    3
    janelle is on a distinguished road

      0  

    Default


    Note: make sure you don't use "this" inside the setTimeout.

    Code:
    // note: currently in the carousel
    this.removeAll(true);
    carousel = this;
    
    
    setTimeout(function(){
    	carousel.add(items);
    	carousel.doLayout();
    }, 10);
    
    // display the carousel
    wrapperPanel.setActiveItem(carousel);
    
    
    // set second card as active item
    carousel.setActiveItem(1);

Similar Threads

  1. problem of the href? or carousel?
    By treeben in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 25 Nov 2010, 9:00 PM
  2. Create Carousel with dynamic data
    By sj_tt6 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 18 Nov 2010, 11:49 AM
  3. Broken in 1.0RC? Carousel with dynamic card content used to work until 1.0RC
    By mnjacobs in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 10 Nov 2010, 9:46 AM
  4. Problem with Carousel and Map, same problem in Kiva
    By steve1964 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 9 Oct 2010, 5:46 AM
  5. [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.
    By Mphasize in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 1 Jul 2010, 11:41 AM

Thread Participants: 3

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..."