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
    Answers
    1
    Vote Rating
    0
    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.

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