1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    mattjones701 is on a distinguished road

      0  

    Default Answered: Carousel within TabPanel

    Answered: Carousel within TabPanel


    Hi,

    I am trying to embed a Carousel object within a TabPanel.
    Here is the code I have now.

    Viewport.js
    Code:
    Ext.define("GCRUs.view.Viewport", {    extend: 'Ext.TabPanel',
        config: {
        	fullscreen: true,
        	title: 'Gadget Covers R Us',
        	tabBarPosition: 'bottom',
        	defaults: {
                styleHtmlContent: true
            },
        	items: [
        	        {
        	        	title: 'Products',
        	        	iconCls: 'star',    
        	        	xtype: 'productSelectPage'
        	        }
        	]
        }
    });


    ProductSelect.js
    Code:
    Ext.define('GCRUs.view.ProductSelect', {    extend: 'Ext.Panel',
        requires: [
                  'Ext.TitleBar',
                  'GCRUs.view.ProductCarousel'
        ],
        xtype: 'productSelectPage',
        config: {		
        	items: [
        	        {
        	            xtype: 'titlebar',
        	            docked: 'top',
        	            title: 'Products'
        	        },
        	        {
        	        	xtype: 'productCarouselPage'
        	        }
        	]
    
    
        }
    
    });


    ProductCarousel.js
    Code:
    Ext.define('GCRUs.view.ProductCarousel', {	extend: 'Ext.Carousel',
    	xtype: 'productCarouselPage',
    	config: {
        	defaults: {
        		styleHtmlContent: true
        	},
        	items: [
        	        {
        	            html : 'Item 1',
        	            style: 'background-color: #FF0000'
        	        },
        	        {
        	            html : 'Item 2',
        	            style: 'background-color: #00FF00'
        	        }
        	]
    	}
    });


    Currently I see the TabPanel containing the products icon. And the Products Titlebar but nothing else.

    Can you see what I am doing wrong?

    Thanks

  2. You are overnesting. The carousel does not need to be within a panel like you have it. The carousel can have the titlebar on it and be a direct child item of the tab panel and all will work.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,677
    Answers
    3355
    Vote Rating
    749
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You are overnesting. The carousel does not need to be within a panel like you have it. The carousel can have the titlebar on it and be a direct child item of the tab panel and all will work.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    mattjones701 is on a distinguished road

      0  

    Default


    Awesome thanks for the help

Thread Participants: 1

Tags for this Thread

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