Ext.ux.Carousel - Carousel menu for Ext JS 4

[pfazel]

Hi,
i wrote a simple carousel plugin for Ext JS 4, this is a work in progress.
help me to improve this component, also you are welcome to use it in your projects if you wish.
the code is written in coffee.script, and i tried to put all base styles in the component, but still you can overwrite them via css style sheet.
to see the configs of this component just take look at code, i will provide a documentation very soon.
Thanks

//Ext.ux.Carousel code start
(function() {
Ext.define('Ext.ux.Carousel', {
extend: 'Ext.DataView',
alias: 'widget.carousel',
alternateClassName: 'carousel',
baseCls: 'x-carousel',
style: 'overflow: hidden;position: relative;',
itemSelector: 'li.x-carousel-item',
interval: 2000,
taskCount: 0,
baseStep: 0,
autoStart: true,
direction: 'left',
loop: true,
buttons: false,
puaseOnHover: false,
emptyText: 'no item to display',
template: '',
nextButtonText: 'next',
previousButtonText: 'previous',
slideContainerStyle: '-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;position: absolute;',
initComponent: function() {
if (this.buttons) {
this.tpl = "<div id=\"x-carousel-buttons\" style=\"position: absolute;z-index: 10000;\"><a href=\"#\" id=\"x-carousel-buttons-prev\">" + this.previousButtonText + "</a><a href=\"#\" id=\"x-carousel-buttons-next\">" + this.nextButtonText + "</a><div class=\"clear\"></div></div><div id=\"x-carousel-slides\" style=\"" + this.slideContainerStyle + "\"><ul><tpl for=\".\"><li class=\"x-carousel-item\"> " + this.template + " </li></tpl></ul></div>";
} else {
this.tpl = "<div id=\"x-carousel-slides\" style=\"" + this.slideContainerStyle + "\"><ul><tpl for=\".\"><li class=\"x-carousel-item\"> " + this.template + " </li></tpl></ul></div>";
}
this.on({
itemmouseup: this.onMouseClick,
childready: this.initializeView,
afterrender: function() {
var that;
that = this;
return setTimeout(function() {
return that.fireEvent('childready');
}, 1);
},
scope: this
});
return this.callParent(arguments);
},
initializeView: function(view, opt) {
var display, float, that, ul;
if (this.autoStart) {
this.taskRunner();
}
if (this.puaseOnHover && this.taskCfg) {
this.on({
itemmouseenter: this.onMouseOver,
itemmouseleave: this.onMouseOut,
scope: this
});
}
this.itemHeight = this.height;
this.itemWidth = this.width;
({
float: '',
display: ''
});
this.storeCount = this.store.getCount();
this.slidesContainer = Ext.get('x-carousel-slides');
this.slidesContainer.setTop(0);
ul = this.slidesContainer.child('ul');
if (this.direction === 'left') {
float = 'left';
display = 'inline-block';
ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
this.slidesContainer.setLeft(0);
} else if (this.direction === 'right') {
float = 'right';
display = 'inline-block';
ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
this.slidesContainer.setRight(0);
} else if (this.direction === 'up') {
display = 'block';
ul.setSize(this.itemWidth, this.itemHeight);
this.slidesContainer.setLeft(0);
}
that = this;
Ext.Array.each(Ext.DomQuery.select('.x-carousel-item'), function(item) {
var itemEl;
itemEl = Ext.get(item);
itemEl.setSize(that.itemWidth, that.itemHeight);
return itemEl.setStyle({
float: float,
display: display
});
});
if (this.buttons) {
Ext.get('x-carousel-buttons-next').on('click', this.next, this);
return Ext.get('x-carousel-buttons-prev').on('click', this.previous, this);
}
},
next: function() {
if (this.taskCount < this.storeCount - 1) {
return this.scroll[this.direction](this.slidesContainer, ++this.taskCount, this.itemWidth, this.itemHeight);
}
},
previous: function() {
if (this.taskCount >= 1) {
return this.scroll[this.direction](this.slidesContainer, --this.taskCount, this.itemWidth, this.itemHeight);
}
},
onMouseOver: function() {
return Ext.TaskManager.stop(this.taskCfg);
},
onMouseOut: function() {
return Ext.TaskManager.start(this.taskCfg);
},
onMouseClick: function() {
return console.log('item clicked');
},
scroll: {
up: function(el, count, itemWidth, itemHeight) {
return el.setTop(-itemHeight * count);
},
left: function(el, count, itemWidth, itemHeight) {
el.addCls('hor');
return el.setLeft(-itemWidth * count);
},
right: function(el, count, itemWidth, itemHeight) {
el.addCls('hor');
return el.setRight(-itemWidth * count);
}
},
loopHandler: {
up: function(el) {
return el.setTop(0);
},
left: function(el) {
return el.setLeft(0);
},
right: function(el) {
return el.setRight(0);
}
},
restartTask: function(task) {
Ext.TaskManager.stop(task);
return Ext.TaskManager.start(task);
},
taskRunner: function() {
this.taskCfg = {
run: function(count) {
if (this.taskCount < this.storeCount) {
this.scroll[this.direction](this.slidesContainer, this.taskCount, this.itemWidth, this.itemHeight);
if (this.taskCount !== 0 && count === 1) {
this.baseStep = this.taskCount;
}
return this.taskCount = this.baseStep + count;
} else if (this.loop) {
this.baseStep = 0;
this.taskCount = 0;
this.loopHandler[this.direction](this.slidesContainer);
return this.restartTask(this.taskCfg);
} else {
return Ext.TaskManager.stop(this.taskCfg);
}
},
interval: this.interval,
scope: this
};
return Ext.TaskManager.start(this.taskCfg);
}
});
}).call(this);

Sample usage:

//Sample Usage
Ext.onReady(function() {
//Define a store to use as carousel items.
var store = Ext.create('Ext.data.Store', {
fields: ['title', 'imgSrc'],
data: [{
title: 'Cloud Forest',
imgSrc: 'http://www.irpedia.com/upload/iblock/986/9861ba4be2ccb35b2cf655c68eb6d7b6.jpg'},
{
title: 'Cloud Forest 2',
imgSrc: 'http://www.irpedia.com/upload/iblock/e94/e94a2e2acf3cfadfdc815c442fec6e79.jpg'},
{
title: 'Cloud Forest',
imgSrc: 'http://www.irpedia.com/upload/iblock/aac/aac93f9f82dbb656ece5f9b546ef0417.jpg'}]
});

//Define a customized carousel 
Ext.define('MyCarousel', {
extend: 'Ext.ux.Carousel',
alias: 'widget.mycarousel',
template: '<img src="{imgSrc}" alt="{title}" style="width:300px;height:225px" />',
store: store,
interval: 3000,
direction: 'left',
loop: true,
buttons: false,
puaseOnHover: true,
width: 300,
height: 225
});

//Create a panel and use mycarousel as one of it's child item.
Ext.create('Ext.panel.Panel', {
width: '100%',
height: 300,
items: [
{
html: 'This Page should be seen in a css3 supported web browser'},
{
xtype: 'mycarousel'}
],
renderTo: Ext.getBody()
});
})​

DEMO Page

Demo Page 2 (Picture Slide)

[drplasma]

Thanks for the efforts.A carousel was much appreciated for the big extjs framework.
The code piece you have included for some reason missed brackets and parenthesis.please include them on a zip file and/or github.

[pfazel]

The original code is written in CoffeeScript which is the cause of different syntax, i put JS syntax in main post.

[misterblinky]

Hi ... interested to try this. Can you provide ALL the code needed to run it? Including

a) HTML markup on page (an example page)
b) The code for teh store.
c) whatever else is needed to run this.

If you've improved it since your original post, maybe edit the original post with the updated code?

thanks

[wemerson.januario]

where is the css file?
Please post a zip file of all needed files to run it, or a demo url.

thanks

[lorezyra]

Please provide a demo URL...

[janhov]

Hi, thanks for this. It works.

However, I think the image sliding is a bit laggy in contrast to the 3.x sample which is perfectly smooth. Any ideas why? Using Ubuntu Chrome. I can provide a zip with the necessary files if needed.

[aloiseau]

Hello,

I have this error with your code :

TypeError: this.slidesContainer is null
this.slidesContainer.setTop(0);

[javapurna]

hi ,
first great thanks for you.

i am using your code ,but it is not working properly . the images are not scrolling for specified time interval . it show first image and still constantly . and one more error is show [Uncaught TypeError: Cannot call method 'setTop' of null ]

initializeView: function(view, opt) {
var display, float, that, ul;
if (this.autoStart) {
this.taskRunner();
}
if (this.puaseOnHover && this.taskCfg) {
this.on({
itemmouseenter: this.onMouseOver,
itemmouseleave: this.onMouseOut,
scope: this
});
}
this.itemHeight = this.height;
this.itemWidth = this.width;
({
float: '',
display: ''
});
this.storeCount = this.store.getCount();
this.slidesContainer = Ext.get('x-carousel-slides');
this.slidesContainer.setTop(0); -------------------------------> here i am getting error
ul = this.slidesContainer.child('ul');
if (this.direction === 'left') {
float = 'left';
display = 'inline-block';
ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
this.slidesContainer.setLeft(0);
} else if (this.direction === 'right') {
float = 'right';
display = 'inline-block';
ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
this.slidesContainer.setRight(0);
} else if (this.direction === 'up') {
display = 'block';
ul.setSize(this.itemWidth, this.itemHeight);
this.slidesContainer.setLeft(0);
}
that = this;
Ext.Array.each(Ext.DomQuery.select('.x-carousel-item'), function(item) {
var itemEl;
itemEl = Ext.get(item);
itemEl.setSize(that.itemWidth, that.itemHeight);
return itemEl.setStyle({
float: float,
display: display
});
});
if (this.buttons) {
Ext.get('x-carousel-buttons-next').on('click', this.next, this);
return Ext.get('x-carousel-buttons-prev').on('click', this.previous, this);
}
},




please provide css for this app or url for zip file

[aloiseau]

this.slidesContainer = Ext.get('x-carousel-slides');

When you create an carousel item, the div class "x-carousel-slides" doesn't exist..
if you solve this problem, reply..