PDA

View Full Version : Ext.ux.Carousel - Carousel menu for Ext JS 4



pfazel
9 Nov 2011, 12:47 AM
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

(http://jsfiddle.net/parham_fazel/jqbaV/34/)Demo Page 2 (Picture Slide) (http://jsfiddle.net/parham_fazel/4vUJn/15/)

drplasma
15 Nov 2011, 4:46 AM
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
19 Nov 2011, 1:18 AM
The original code is written in CoffeeScript which is the cause of different syntax, i put JS syntax in main post.

misterblinky
13 Dec 2011, 12:46 PM
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
21 Feb 2012, 8:12 AM
where is the css file?
Please post a zip file of all needed files to run it, or a demo url.

thanks

lorezyra
21 Feb 2012, 6:09 PM
Please provide a demo URL...

janhov
8 May 2012, 1:07 PM
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
31 May 2013, 4:33 AM
Hello,

I have this error with your code :


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

javapurna
3 Jun 2013, 12:23 AM
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
3 Jun 2013, 12:46 AM
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..

aloiseau
5 Jun 2013, 3:39 AM
Anybody can help us ?