PDA

View Full Version : Unable to use carousel in extjs



chinnib37
3 Jun 2013, 4:29 AM
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.

slemmon
5 Jun 2013, 9:52 AM
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-core-latest/examples/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:



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.