1. #1
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default Using slickcard and taskrunner on cardpanel for carousel

    Using slickcard and taskrunner on cardpanel for carousel


    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:
    Code:
    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:

    Code:
    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:
    Code:
    #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;
    }

  2. #2
    Ext JS Premium Member smokeman's Avatar
    Join Date
    Jul 2007
    Posts
    475
    Vote Rating
    2
    smokeman is on a distinguished road

      0  

    Default adding toolbar

    adding toolbar


    I added a toolbar to my rotator, add this to listeners:
    Code:
    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);
    Code:
    Ext.getCmp('carousel').getLayout().activeItem.getBottomToolbar().items.each(function(item){item.toggle(false);});
                                                                     Ext.getCmp('carousel').getLayout().activeItem.getBottomToolbar().get(n).toggle(true);

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