Results 1 to 6 of 6

Thread: Stubborn Carousel

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    19
    Vote Rating
    0
      0  

    Default Stubborn Carousel

    Hello! I have an odd problem with my carousel -- when I try to swipe it I can see the next picture coming on screen, but when I let go it snaps back to my original photo. I'm not sure what I'm doing wrong -- my code seems straightforward (below):

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
    		var toolbar = new Ext.Toolbar({
    			dock: 'top',
    			items: [{
    				text: 'Back'
    			}]
    		});
    		
    		var carousel2 = new Ext.Carousel({
    			indicator: true,
    			direction: 'vertical',
    			items: [{
    				title: 'Tab 1',
    				html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
    			},
    			{
    				title: 'Tab 2',
    				html: '<img src="images/image2.jpg" />'
    			},
    			{
    				title: 'Tab 3',
    				html: '<img src="images/image3.jpg" />'
    			}]
    		});
    
    		var fixedimage = new Ext.Panel({
    			title: 'Fixed Image',
    			html: '<img src="images/image2.jpg" />'
    		});
    
    		var comparescreen = new Ext.Panel({
    			fullscreen: true,
    			dockedItems: [toolbar],
    			layout: 'hbox',
    			items: [carousel2,fixedimage]
    		});
    	}
    });
    Any help would be great! Thanks!

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,185
    Vote Rating
    1000
      0  

    Default

    Give the carousel some kind of dimensions, most importantly, a height.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User arlo.carreon's Avatar
    Join Date
    Jul 2010
    Location
    Orlando, TX
    Posts
    34
    Vote Rating
    0
      0  

    Default Carousel in a Fullscreen Panel

    Yea, you definitely need to put some dimensions in your Carousel configuration. I ran into the same problem. I am also having issues with making my Panel fullscreen. When I make the panel full screen the pictures in my carousel disappear.

    Anyone know how to work around that? For example can I manually get the detected width and height of the body, via sencha?

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    @arlo

    What is the reason the images disappear? A fullscreen panel automatically uses the same dimensions as the body.

  5. #5
    Sencha User arlo.carreon's Avatar
    Join Date
    Jul 2010
    Location
    Orlando, TX
    Posts
    34
    Vote Rating
    0
      0  

    Default

    @Tommy

    I am not sure why the photos disappear. The panel and the carousel it has inside do go fullscreen, but the images in the carousel do not show. Unless I put a fixed width and height on the images, then they do show.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    Can you try the following code and see if it works?

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
    		var toolbar = new Ext.Toolbar({
    			dock: 'top',
    			items: [{
    				text: 'Back'
    			}]
    		});
    		
    		var carousel2 = new Ext.Carousel({
    		    flex: 1,
    			indicator: true,
    			direction: 'vertical',
    			items: [{
    				title: 'Tab 1',
    				html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
    			},
    			{
    				title: 'Tab 2',
    				html: '<img src="images/image2.jpg" />'
    			},
    			{
    				title: 'Tab 3',
    				html: '<img src="images/image3.jpg" />'
    			}]
    		});
    
    		var fixedimage = new Ext.Panel({
    		    flex: 1,
    			title: 'Fixed Image',
    			html: '<img src="images/image2.jpg" />'
    		});
    
    		var comparescreen = new Ext.Panel({
    			fullscreen: true,
    			dockedItems: [toolbar],
    			layout: {
    			    type: 'hbox',
    			    align: 'stretch'
    			},
    			items: [carousel2,fixedimage]
    		});
    	}
    });

Similar Threads

  1. Carousel AutoPlay
    By mobigeni in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 6 Jul 2010, 12:45 PM
  2. [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
  3. gxt carousel
    By superjames in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 13 Nov 2009, 5:13 AM
  4. Carousel
    By doron447 in forum Ext: Q&A
    Replies: 8
    Last Post: 9 Jul 2009, 1:25 AM

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
  •