1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    24
    Vote Rating
    0
    epalm is on a distinguished road

      0  

    Default carousel in a tabpanel

    carousel in a tabpanel


    Code:
    Ext.setup({
    	
    	icon: 'icon.png',
    	glossOnIcon: false,
    	
    	onReady: function() {
    		
    		new Ext.TabPanel({
    			fullscreen: true,
    			tabBar: {
    				dock: 'bottom',
    				layout: { pack: 'center' }
    			},
    			animation: 'fade',
    			items: [{
    				title: 'Search',
    				iconCls: 'search',
    				cls: 'card card1',
    				items: {
    					xtype: 'carousel',
    					items: [{
    						html: 'Card #1',
    						cls: 'card card1',
    					},{
    						html: 'Card #2',
    						cls: 'card card2'
    					},{
    						html: 'Card #3',
    						cls: 'card card3'
    					}]
    				}
    			},{
    				title: 'Other',
    				html: '<p>Something else could go here...</p>',
    				iconCls: 'info',
    				cls: 'card card2'
    			}]
    		});
    	}
    });
    TabPanel and Carousel work on their own, but if I put a Carousel inside a TabPanel, the Carousel doesn't budge.

    Any suggestions?

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    24
    Vote Rating
    0
    epalm is on a distinguished road

      0  

    Default


    Also, I keep seeing
    Code:
    cls: 'card cardN'
    in the examples. Are they necessary?

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    8
    TommyMaintz will become famous soon enough

      0  

    Default


    Those classes are just to give the cards different colors.

    The reason the Carousel doesnt work is because you are overnesting. If you want to add a carousel as an item of a Tabpanel, you can just add it to the TabPanels items array. The following will work:

    Code:
    Ext.setup({	
    	icon: 'icon.png',
    	glossOnIcon: false,	
    	onReady: function() {		
    		new Ext.TabPanel({
    			fullscreen: true,
    			tabBar: {
    				dock: 'bottom',
    				layout: {pack: 'center'}
    			},
    			animation: 'fade',
    			items: [{
    				title: 'Search',
    				iconCls: 'search',
    				xtype: 'carousel',
    				items: [{
    					html: 'Card #1',
    					cls: 'card card1',
    				},{
    					html: 'Card #2',
    					cls: 'card card2'
    				},{
    					html: 'Card #3',
    					cls: 'card card3'
    				}]
    			}, {
    				title: 'Other',
    				html: '<p>Something else could go here...</p>',
    				iconCls: 'info',
    				cls: 'card card2'
    			}]
    		});
    	}
    });
    If you want to wrap a panel around it, you would have to specify a layout of 'fit' on that wrapping panel to have the carousel take up all the available space.

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    24
    Vote Rating
    0
    epalm is on a distinguished road

      0  

    Default


    Got it. Much thanks.

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. [OPEN] [FIXED-19] Can't put a TabPanel inside a carousel
    By rdougan in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 3 Jun 2010, 1:54 AM
  4. Carousel
    By doron447 in forum Ext: Q&A
    Replies: 8
    Last Post: 9 Jul 2009, 1:25 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar