1. #11
    Sencha User SpyKeey's Avatar
    Join Date
    Oct 2011
    Location
    Iasi, Romania
    Posts
    8
    Vote Rating
    0
    SpyKeey is on a distinguished road

      0  

    Question Auto-Sliding Carousel integration

    Auto-Sliding Carousel integration


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

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

  2. #12
    Sencha User
    Join Date
    Sep 2011
    Posts
    125
    Vote Rating
    0
    Answers
    1
    oddz is on a distinguished road

      0  

    Default


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

    Example:

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