Using slickcard and taskrunner on cardpanel for carousel

[smokeman]

This is just a way to use a cardpanel with slickcard to rotate the cardpanels like an image rotator, or carousel. You could add a toolbar to get the carousel buttons, the taskrunner would get the currently active card, and rotate to the next.

setup the transition effect in your slickcard extension:

Ext.ux.SlickCardLayout = Ext.extend(Ext.layout.CardLayout, {

    setActiveItem : function(item){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(this.activeItem){
                this.activeItem.hide();
            }
            this.activeItem = item;
            this.layout();
            item.show();
            item.getEl().fadeIn({duration:2.5});  //effect, with effect parameters
        }
    }
}); // end of extend
Ext.Container.LAYOUTS['slickcard'] = Ext.ux.SlickCardLayout;

carousel definition:

id:'carousel',
height:300,
layout:'slickcard',
activeItem:0,
bodyCfg : {cls:'transparentbody'},
listeners:{
    afterrender:function(c){
                    var cards = c.items.items;
                // console.log(cards);
                    len = cards.length;
               //  console.log(len);
                    len = len - 1; //cards start at 0
                    var task = {
			    run: function (){
                            i=Ext.getCmp('carousel').getLayout().activeItem.id.split('card-')[1];
                            console.log('i='+i);
                            console.log('stopat'+len);
                            //***increment****
                            if(i == len){
                                    n = 0;
                                           }
                            else{
                             var n = parseInt(i) + 1; 
                                         }
                            //************
                            console.log('next: '+n);
                            Ext.getCmp('carousel').getLayout().setActiveItem(n);
                                                },
			   interval: 8000,
                           args:[{len:len}]//1 second
						}
			Ext.TaskMgr.start(task);
                                    }
                                },
 items:[{
             id:'card-0',
             bodyCfg : {cls:'transparentbody'}
          },{
             id:'card-1',
             bodyCfg : {cls:'transparentbody'}},{
             id:'card-2',
             bodyCfg : {cls:'transparentbody'}}]
            }

css for images:

#card-0{
	background: url("../images/slide1.jpg") no-repeat;
}
#card-1{
	background: url("../images/slide2.jpg") no-repeat;
}
#card-2{
	background: url("../images/slide3.jpg") no-repeat;
}
#card-3{
	background: url("../images/slide4.jpg") no-repeat;
}

[smokeman]

I added a toolbar to my rotator, add this to listeners:

beforerender:function(c){
              var cards = c.items.items;
                c.items.each(function(card){
                  // console.log(card); 
                 card.getBottomToolbar().add({
                                text:'1',
                                enableToggle:true,
                                handler:function(){Ext.getCmp('carousel').getLayout().setActiveItem(0);}
                                },{
                                text:'2',
                                enableToggle:true,
                                handler:function(){Ext.getCmp('carousel').getLayout().setActiveItem(1);}
                                },{
                                text:'3',
                                enableToggle:true,
                                handler:function(){Ext.getCmp('carousel').getLayout().setActiveItem(2);}
                                },{
                                text:'4',
                                enableToggle:true,
                                handler:function(){Ext.getCmp('carousel').getLayout().setActiveItem(3);}
                                
                                });
                 card.doLayout();
                 });
              },

and add this after Ext.getCmp('carousel').getLayout().setActiveItem(n);

Ext.getCmp('carousel').getLayout().activeItem.getBottomToolbar().items.each(function(item){item.toggle(false);});
                                                                 Ext.getCmp('carousel').getLayout().activeItem.getBottomToolbar().get(n).toggle(true);