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
    16,824
    Vote Rating
    609
    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
    16,824
    Vote Rating
    609
    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
    16,824
    Vote Rating
    609
    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
    16,824
    Vote Rating
    609
    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

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..." hd porno faketaxi