AUTO SLIDING IN CAROUSEL while using MVC architecture

[SpyKeey]

Hello oddz,

I was wondering how should I user the code you posted to make my carousel auto slide. Here is my code from one of the views (my app is MVC structured):

MyApp.views.HomeIndex = Ext.extend(Ext.Panel, {
  layout: {
    type: 'vbox',
    pack: 'center',
    align: 'fit'
  },  
  initComponent: function() {
    this.carousel = new Ext.Carousel({
      defaults: { cls: 'card' },
      items: [
        { html: 'Slide 1'}, 
        { html: 'Slide 2'}, 
        { html: 'Slide 3'}
      ]
    });

    this.items = [this.carousel];

    MyApp.views.HomeIndex.superclass.initComponent.call(this, arguments);
  }
});
Ext.reg('HomeIndex', MyApp.views.HomeIndex);

I tryed changing the carousel to be created using the new xtype: "expcarousel" but I get some error about the "parent" on this line: "this.callParent(arguments);" in constructor.

Thanks for your help.

Luigi,

[oddz]

The carousel should be in a separate class so that the mixin can be defined and constructor overridden to set-up the mixin.

Example:

Ext.define('Exp.view.Carousel',{
    extend: 'Ext.carousel.Carousel',
    xtype: 'expcarousel',
    
    // define mixin - change name appropriately
    mixins: ['Exp.mixin.Automated'],
    
    requires: [
        'Exp.Img'
    ],
    
    config: {
        height: 300,
        items: [
            {
                xtype: 'expimage' , 
                src: 'http://local.mcp/img.php/194/h/1000'
            },
            {
                xtype: 'expimage' , 
                src: 'http://local.mcp/img.php/193/h/1000'
            },
            {
                xtype: 'expimage' , 
                src: 'http://local.mcp/img.php/192/h/1000'
            },
            {
                xtype: 'expimage' , 
                src: 'http://local.mcp/img.php/190/h/1000'
            }
        ]
    },
    
    constructor: function() {
        // set-up mixin
        this.mixins.automated.constructor.apply(this,arguments);
        this.callParent(arguments);
    }
        
});

* Ext.dataview.DataView and Ext.mixin.Selectable was used as reference to figure this out.