Carousel + buttons

[Wiinis]

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

[evant]

Simple example:

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'
                }]
            }]
        });
    }
});

[Wiinis]

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.

[evant]

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.

[bengundersen]

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.

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

[evant]

The 3 simplest options

1) Create a global var (yuk)

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:

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:

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);
                    }
                }]
            }]
        });
    }
});

[DaveC426913]

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?

[evant]

Yes, it does.

[DaveC426913]

You're running a beta version.

[nosarious]

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.