1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    Wiinis is on a distinguished road

      0  

    Default Carousel + buttons

    Carousel + buttons


    Hi, first time poster here. New to sencha and mobile web development in general.

    Looking at the kitchensink example, I wanted to implement a carousel that has buttons to the left in the navigational bar. How would I go about changing the selected button on the left while doing a swipe on the carousel, and vise versa?

    For example, if I have 4 buttons, which associates to 4 carousel pages, how can I sync them to change when the user interacts with either one of the components?

    Thanks

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Simple example:

    Code:
    Ext.setup({
        onReady: function(){
            var p = new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    height: 50,
                    xtype: 'splitbutton',
                    allowMultiple: false,
                    items: [{
                        text: 'Card 1',
                        active: true,
                        handler: function(){
                            p.items.last().setCard(0);
                        }
                    },{
                        text: 'Card 2',
                        handler: function(){
                            p.items.last().setCard(1);
                        }
                    },{
                        text: 'Card 3',
                        handler: function(){
                            p.items.last().setCard(2);
                        }
                    }]
                },{
                    flex: 1,
                    xtype: 'carousel',
                    listeners: {
                        cardswitch: function(carousel, newCard){
                            p.items.first().setActive(carousel.items.indexOf(newCard));
                        }
                    },
                    items: [{
                        html: 'Card 1'
                    },{
                        html: 'Card 2'
                    },{
                        html: 'Card 3'
                    }]
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    Wiinis is on a distinguished road

      0  

    Default


    Sorry for not being clear enough. But the "buttons" I mentioned were navigationItems rather than actual buttons and they are not declared in the same file nor the same time.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The logic for doing this is still the same, whether or not they are in a different file doesn't really matter, as long as you can access them.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    7
    Vote Rating
    0
    bengundersen is on a distinguished road

      0  

    Default


    I'm doing basically the same thing as Wiinis but am trying to separate the toolbar definition from the carousel (putting all the toolbar objects into a separate file), but then I can't reference the carousel from the toolbar items.

    Code:
    var tbar = [{
    	xtype: 'toolbar',
    	dock: 'top',
    	items: [{
    		xtype: 'toolbar',
    		ui: 'action',
    		items: [{
    			text: 'Slide 1',
    			handler: function(){ car.setCard(item1); },
    		}, {
    			text: 'Slide 2',
    			handler: function(){ car.setCard(item2); }
    		}, {
    			text: 'Slide 3',
    			handler: function(){ car.setCard(item3); },
    		}]
    	}]
    }];
    
    function createCarousel(i) {
    	var index = i;
    	var rec = list.store.getAt(i);
    
    	var car = new Ext.Carousel({
    		dockedItems: tbar,
                    title: rec.get("Name"),
    		items: [item1, item2, item3]
    	});
    	
    	var card = mainPanel.add(car);
    	mainPanel.doLayout();
    	mainPanel.setCard(card);
    }
    
    // createCarousel is called when a list item is clicked on mainPanel

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The 3 simplest options

    1) Create a global var (yuk)

    Code:
    var tbar = [{
    	xtype: 'toolbar',
    	dock: 'top',
    	items: [{
    		xtype: 'toolbar',
    		ui: 'action',
    		items: [{
    			text: 'Slide 1',
    			handler: function(){ car.setCard(item1); },
    		}, {
    			text: 'Slide 2',
    			handler: function(){ car.setCard(item2); }
    		}, {
    			text: 'Slide 3',
    			handler: function(){ car.setCard(item3); },
    		}]
    	}]
    }];
    var car;
    function createCarousel(i) {
    	var index = i;
    	var rec = list.store.getAt(i);
    
    	car = new Ext.Carousel({
    		dockedItems: tbar,
                    title: rec.get("Name"),
    		items: [item1, item2, item3]
    	});
    	
    	var card = mainPanel.add(car);
    	mainPanel.doLayout();
    	mainPanel.setCard(card);
    }
    2) Give the carousel an id:

    Code:
    var tbar = [{
    	xtype: 'toolbar',
    	dock: 'top',
    	items: [{
    		xtype: 'toolbar',
    		ui: 'action',
    		items: [{
    			text: 'Slide 1',
    			handler: function(){ Ext.getCmp('car').setCard(item1); },
    		}, {
    			text: 'Slide 2',
    			handler: function(){ Ext.getCmp('car').setCard(item2); }
    		}, {
    			text: 'Slide 3',
    			handler: function(){ Ext.getCmp('car').setCard(item3); },
    		}]
    	}]
    }];
    
    function createCarousel(i) {
    	var index = i;
    	var rec = list.store.getAt(i);
    
    	var car = new Ext.Carousel({
                    id: 'car',
    		dockedItems: tbar,
                    title: rec.get("Name"),
    		items: [item1, item2, item3]
    	});
    	
    	var card = mainPanel.add(car);
    	mainPanel.doLayout();
    	mainPanel.setCard(card);
    }
    3) Find it via container:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        statusBarStyle: 'black',
        onReady: function(){
            new Ext.Panel({
                fullscreen: true,
                html: 'foo',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Foo',
                        handler: function(btn){
                            var o = btn.ownerCt.ownerCt;
                            console.log(o.id);
                        }
                    }]
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    Simple example:
    This simple example does not work.

    Uncaught TypeError: Cannot read property 'items' of undefined

    In fact, in two days of searching I have yet to find a single working example of the setCard method used on a carousel.

    Does the method, in fact, work?

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Yes, it does.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    You're running a beta version.

  10. #10
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    Try using some of the sample Event provided in this post. Decipher how it works and troubleshoot yours.

    http://www.sencha.com/forum/showthre...-carousel-card.

Similar Threads

  1. !Question about Carousel in Carousel...
    By yCD in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 31 Jul 2010, 9:51 AM
  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. Making toolbar buttons look like regular buttons
    By Britace in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Nov 2009, 7:26 PM
  4. Issues with Buttons & MessageBox Buttons in AIR
    By Juvs in forum Ext.air for Adobe AIR
    Replies: 0
    Last Post: 25 Sep 2008, 7:34 AM

Thread Participants: 6