Results 1 to 2 of 2

Thread: Unable to use carousel in extjs

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    43

    Default Unable to use carousel in extjs

    Hi,
    I want to use carousel in my application.
    But I am unable to use it.
    Please provide a sample example using carousel in extjs.
    Thanks in advance.

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    There is not a carousel widget in ExtJS. But, you might look at the example here and see if you can adapt it to fit in your project:
    http://dev.sencha.com/playpen/ext-co...ples/carousel/

    Or, here's something I was working on and while it's not very tested and is simply something I was messing around with, you're welcome to anything you find that you think works for your application:

    Code:
    Ext.define('My.ux.QCarousel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.qcarousel',
        
        border: false,
        
        nextOutDir: 'l',
        nextInDir: 'r',
        prevOutDir: 'r',
        prevInDir: 'l',
    
    
        initComponent: function () {
            var me = this,
                el = me.getEl();
            
            Ext.each(me.items, function (item) {
                Ext.apply(item, {
                    floating: true,
                    shadow: false,
                    renderTo: document.body
                });
            });
            
            me.callParent(arguments);
            
            me.floatingItems.each(function (item) {
                item.relayEvents(me, ['resize', 'activate'], 'owner');
                item.on({
                    ownerresize: function () { me.syncSize(item); },
                    owneractivate: function () { me.syncSize(item); },
                    afterrender: function () { me.syncSize(item); }
                });
            });
        },
        
        syncSize: function (item) {
            var me = this,
                el = me.body;
            
            Ext.suspendLayouts();
            item.setSize(el.getSize());
            item.setPosition(el.getLeft(), el.getTop());
            if (item === me.activeItem) {
                item.show(); // gets messed up with me gets blurred
            }
            Ext.resumeLayouts(true);
        },
        
        onBoxReady: function (w, h) {
            var me = this, first;
            me.callParent(arguments);
            first = me.floatingItems.first();
            
            me.activeItem = first.show();
        },
        
        next: function (outDir, inDir, duration) {
            var me = this,
                floatingItems = me.floatingItems,
                activeIndex = floatingItems.indexOf(me.activeItem),
                nextIndex = (activeIndex + 1) > floatingItems.getCount() - 1 ? 0 : activeIndex + 1,
                outDir = outDir || me.nextOutDir,
                inDir = inDir || me.nextInDir;
    
    
            return me.setActiveItem(nextIndex, outDir, inDir, duration);
        },
        
        prev: function (outDir, inDir, duration) {
            var me = this,
                floatingItems = me.floatingItems,
                activeIndex = floatingItems.indexOf(me.activeItem),
                prevIndex = (activeIndex - 1) < 0 ? floatingItems.getCount() - 1 : activeIndex - 1,
                outDir = outDir || me.prevOutDir,
                inDir = inDir || me.prevInDir;
    
    
            return me.setActiveItem(prevIndex, outDir, inDir, duration);
        },
        
        // item can be the component or the index of the component
        setActiveItem: function (item, outDir, inDir, duration) {
            var me = this,
                item = Ext.isNumber(item) ? me.floatingItems.getAt(item) : item
                outDir = outDir || me.nextOutDir,
                inDir = inDir || me.nextInDir,
                duration = duration || 150;
            
            me.activeItem.getEl().slideOut(outDir, { duration: duration });
            me.activeItem = item;
            item.focus().getEl().slideIn(inDir, { duration: duration });
            
            return item;
        }
    });
    
    Again, only lightly tested, so no guarantees as to how well it works.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •