AUTO SLIDING IN CAROUSEL while using MVC architecture

[deepaknair.g]

Hi ,
I am trying to enable autoslide to my carousel.In my application,the carousel is a child of which viewport is a parent.I couldn't call/define any function in the 'listeners'.Whenever I refer the element using "this",I think the reference points to the parent viewport ,Also,my attempt to use the 'xtype' also failed.Can anyone help me?

[AndreaCammarata]

Hi.
Can you post some code on how are you trying to do that just to understand your application architecture and find the scope issue?
Thank you

[deepaknair.g]

Hi,
I have a tab panel as parent.Inside that I have two panels.In one of that panel,I have a carousel and a list.
I have to make that carousel to slide automatically in a specific interval.Let me show the code of my carousel. Hopefully awaiting your reply.

CODE:

Ext.define('Sencha.view.Article', { extend: 'Ext.Carousel',
xtype: 'articlespage',

layout: 'card',
cardSwitchAnimation: 'fade',
config: {
title: 'Articles',
iconCls: 'star',
height: 400,

items: [
{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


},


{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


}


],
listeners:
{
// Here I couldn't get access to the object of carousel.I couldn't use "this" or "xtype" here.// 

}

}
});

How can I access the object of my carousel?...

Once again thanks.....

[oddz]

Do you also need listen for user interaction with the carousel and delay automation until the user stops interacting with the carousel?

[oddz]

oh… by object what are you referring to the carousel component, root level Ext.Element or items within the carousel?

[deepaknair.g]

Hi oddz,
Thanks.I meant exactly what you have asked.The carousel autosliding should be delayed while user interacts with it.So I have to listen for user interaction.
By object, I thought of referring the root level Ext. element,I mean the carousel itself.But it will be great if you can provide pieces of code for accessing both,items within the carousel, as well as root level element. Hopefully awaiting your reply...

[logicseeds]

Ext.define("Article", {

xtype: 'articlespage',

layout: 'card',
cardSwitchAnimation: 'fade',
config: {
title: 'Articles',
iconCls: 'star',
height: 400,

items: [
{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


},


{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


}


],

/***********************************/

//@override
onDragStart : function() {

     //// implement your code here
    this.callParent(arguments);  // note, UI updating only fires if 'callparent' runs

},
onDrag : function() {
this.callParent(arguments);
},
onDragEnd: function() {
this.callParent(arguments);
},
/***********************************/
listeners:
{
// Here I couldn't get access to the object of carousel.I couldn't use "this" or "xtype" here.// 

}

} 

For accessing a listener on a 'this', its default is do scope itself on the object that defines it - in your case 'Article'. However, there must exist an event before you can listen - check docs for these. In short, what happens is the same as the above override - the user functionality is run and then the corresponding general (if any) event handler runs. You could do like this:

...
listeners : {
     show : this.myShow
},

myShow : function() {

  // here you will have this == Ext.getCmp(Article)

}
... 

[deepaknair.g]

Thank you logicseeds.

[oddz]

This will likely become a mixin but the below method seems to work well.

Ext.define('Exp.view.Carousel',{
    extend: 'Ext.carousel.Carousel',
    xtype: 'expcarousel',
    
    config: {
        height: 200,
        items: [
            {html: 'One'},
            {html: 'Two'},
            {html: 'Three'},
            {html: 'Four'},
            {html: 'Five'}
        ]
    },
    
    automation: null,
    
    constructor: function() {
        this.callParent(arguments);
        this.startAutomate();
    },
    
    onDragStart: function() {
        this.stopAutomate();
        this.callParent(arguments);
    },
    
    onDragEnd: function() {
        this.callParent(arguments);
        this.startAutomate();
    },
    
    stopAutomate: function() {
        clearTimeout(this.automation);
    },
        
    startAutomate: function() {
        this.automation = setTimeout((function(me) {
            return function() {
                me.onAutomateInterval();
            };
        })(this),5000);
    },
    
    onAutomateInterval: function() {
        this.on('activeitemchange',this.startAutomate,this,{single:true});        
        this.next();
    
    }
        
});

[oddz]

Here is a mixin that also goes to the first card when the last is reached.

Ext.define('Exp.mixin.Automated',{
    extend: 'Ext.mixin.Mixin',
    
    automation: null,
    
    config: {
        delay: 5000
    },
    
    mixinConfig: {
        id: 'automated',
        beforeHooks: {
            stop: 'onDragStart'
        },
        afterHooks: {
            doInitialize: 'doInitialize',
            start: 'onDragStart'
        }
    },
    
    doInitialize: function() {
        this.start();
    },
    
    stop: function() {
        clearTimeout(this.automation);
    },
        
    start: function() {
        this.automation = setTimeout((function(me) {
            return function() {
                me.interval();
            };
        })(this),this.getDelay());
    },
    
    interval: function() {
    
        var
        
        cards = this.getInnerItems();
    
        this.on('activeitemchange',this.start,this,{single:true});    
        
        if((cards.length - 1) === this.getActiveIndex()) {
            this.setActiveItem(cards[0]);
        } else {
            this.next();
        }
    }
    
});