PDA

View Full Version : ExtJS 4 and Ext Core Carousel



remeez.persent
26 Aug 2011, 12:23 AM
Hi,

Has anyone attempted to get Ext Core Carousel to work alongside ExtJS4? I have searched the forums and can't find anything.

Regards
Remeez

skirtle
29 Aug 2011, 12:12 AM
Have you tried it? What goes wrong? I'd imagine any changes in that bit of the library are little more than method renamings so it should be pretty easy just to update the names for any methods that don't exist any more.

remeez.persent
11 Oct 2011, 6:32 AM
Hi,

I got it working, just did some debugging. Attached is the carousel.js file. The only issue is that I can't seem to get the itemSelector tag to work in the carousel.js file, but I just replaced it with the following:


var items = this.el.select("img"); //replace itemSelector with "img" tag

Hope this helps some peeps.

Regards
Remeez

roger.spall
28 Oct 2011, 9:35 AM
I really don't want to sound ungreatful....

This code almost works, except...

- The transition / animate effects don't work
- The stop / start / pause controls don't work in Firefox

Roger

remeez.persent
30 Oct 2011, 11:39 PM
Hi Roger,

It's currently working in Firefox, Chrome and IE9 for me. I am not an experienced programmer, I just took a stab at trying to get it to work.

Regards
Remeez

roger.spall
31 Oct 2011, 3:41 AM
I tried to convert V3 to V4 and failed!

I took your code and it definitely worked, but...

The transition animations do not work - I am using embedded html, not images, and in this V3.0 demo, the 'html slides' transition with different effects, but in V4.0 the 'html slides' transition but with no effects.

Meanwhile, the 'hideNavigation:, navigationOnHover:, freezeOnHover:' options don't appear to work in Firefix, and don't work in MIE if you move over the carousel immediately after it is displayed - I think I fixed the problem in MIE by building the Task during construction.

Roger

roger.spall
31 Oct 2011, 3:42 AM
Of course, I could be using it completely wrong, so if you have a demo I can see, I will copy it.

Thanks,

Roger

Grimreaper
29 Jan 2012, 10:18 PM
Well am kinda new to extjs,
trying to get a carousel to work in extjs4, where using initComponent instead of an onReady throws an exception error 'el.insertAdjacentHTML is null'

now i knw it might be a really inane issue, but then again guess every newbie has his day :)
even when i use init, the carousel is not rendered. any headings to this?

ty :)

remeez.persent
29 Jan 2012, 10:45 PM
Hi,I am also new to ExtJS. Do you have your tags on the page that you want to display the carousel on? Hope this helps. Let me know if you don't get it to work.

Grimreaper
29 Jan 2012, 10:57 PM
thing is, just to play it safe am simply using,
itemSelector: 'img',
var items = this.el.select(this.itemSelector);

thing is that i want to use a main html, hence what am trying to do is , create two diff js files one having the code for the carousel.js,
the other having the code that is defined within the script tag given in your attachment.
on rendering, the space where i have to give an xtype, that region comes out as empty.

on trying to use initComponent, i get the error - 'el.insertAdjacentHTML is null'

ffruehstueck
9 Feb 2012, 11:46 PM
Any help appreciated! ;-)

Cyberluke
6 Apr 2012, 1:42 AM
Hey, it's easy, just look at the Ext.ux.Carousel.js

Previously time for animations was in seconds, but now is in miliseconds.

Change the following in Carousel.js and FX will work:

transitionDuration: 1

transitionDuration: 1000

It's working all the time, it's just so fast ;-)

DOC for fadeIn/fadeOut: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-fadeIn

lostan
7 Feb 2013, 2:40 AM
Hi

I tried to use this with ExtJS 4.1, and it's not working correctly, the images are not even changing. Has someone tried?

d.okuboyejo@gmail.com
11 Feb 2013, 11:53 AM
Hi Guys,

Please can someone provides sample usage of the carousel. I need to know where to place the data(be it images/html) and probably how to use the carousel as xtype.

Tnx

dehydratedH2O
13 Feb 2013, 6:20 AM
I'm on 4.1.1 and have this kind of working... the carousel appears showing the first photo, but after the change none of the other photos show up -- just whitespace. My console shows that it's working, though. (For reference, I'm working off of this example: http://dev.sencha.com/playpen/ext-core-latest/examples/carousel/) Also, I can't get any of the navigation to work. Is there an easy way to get the same functionality without a carousel?

aloiseau
30 May 2013, 9:50 AM
Who can post his example to jsFiddle or here, i make some test and i can't use the carousel...

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

d.okuboyejo@gmail.com
15 Aug 2013, 4:45 AM
In using this, ensure you modify your definition as appropriate


Ext.define( 'YB.view.Carousel', {
extend: 'Ext.util.Observable',
interval: 3,
transitionDuration: 1000,
transitionType: 'carousel',
transitionEasing: 'easeOut',
itemSelector: 'studentProfileCarousel',
activeSlide: 0,
autoPlay: false,
showPlayButton: false,
pauseOnNavigate: false,
wrap: false,
freezeOnHover: true,
navigationOnHover: false,
hideNavigation: false,
width: null,
height: null,


constructor: function ( elId, config )
{
// console.log( 'Id used for Carousel: ' + elId );
config = config || {};
Ext.apply( this, config );


// console.log( 'this inside carousel constructor: ' + this.self.getName() );


YB.view.Carousel.superclass.constructor.call( this, config );


this.addEvents(
'beforeprev',
'prev',
'beforenext',
'next',
'change',
'play',
'pause',
'freeze',
'unfreeze'
);


this.el = Ext.get( elId );
// console.log( document.getElementById( 'studentProfileContainer' ) );
// console.log( 'type of el: ' + this.el.self.getName() );
// console.log( 'html of el: ' + this.el.getHTML() );
// console.log( 'itemSelector for Carousel: ' + config.itemSelector );


this.slides = this.els = [];


if ( this.autoPlay || this.showPlayButton )
{
this.wrap = true;
};


if ( this.autoPlay && typeof config.showPlayButton === 'undefined' )
{
this.showPlayButton = true;
}


this.initMarkup();
this.initEvents();


if ( this.carouselSize > 0 )
{
this.refresh();
}
},


initMarkup: function ()
{
var dh = Ext.core.DomHelper;


this.carouselSize = 0;
// console.log( 'current itemSelector of this inside carousel constructor: ' + this.itemSelector );


var items = this.el.select( '.studentProfileCarousel' ); //replace itemSelector with "img" tag
// console.log( 'items size from this.el.select( this.itemSelector ): ' + items.getCount() );


this.els.container = dh.append( this.el, { cls: 'ux-carousel-container' }, true );
this.els.slidesWrap = dh.append( this.els.container, { cls: 'ux-carousel-slides-wrap' }, true );


this.els.navigation = dh.append( this.els.container, { cls: 'ux-carousel-nav' }, true ).hide();
this.els.caption = dh.append( this.els.navigation, { tag: 'h2', cls: 'ux-carousel-caption' }, true );
this.els.navNext = dh.append( this.els.navigation, { tag: 'a', href: '#', cls: 'ux-carousel-nav-next' }, true );


if ( this.showPlayButton )
{
this.els.navPlay = dh.append( this.els.navigation, { tag: 'a', href: '#', cls: 'ux-carousel-nav-play' }, true )
}
this.els.navPrev = dh.append( this.els.navigation, { tag: 'a', href: '#', cls: 'ux-carousel-nav-prev' }, true );


// set the dimensions of the container
this.slideWidth = this.width || this.el.getWidth( true );
this.slideHeight = this.height || this.el.getHeight( true );
this.els.container.setStyle( {
width: this.slideWidth + 'px',
height: this.slideHeight + 'px'
} );


this.els.caption.setWidth(( this.slideWidth - ( this.els.navNext.getWidth() * 2 ) - ( this.showPlayButton ? this.els.navPlay.getWidth() : 0 ) - 20 ) + 'px' )


items.appendTo( this.els.slidesWrap ).each( function ( item )
{
item = item.wrap( { cls: 'ux-carousel-slide' } );
this.slides.push( item );
item.setWidth( this.slideWidth + 'px' ).setHeight( this.slideHeight + 'px' );
}, this );
this.carouselSize = this.slides.length;
if ( this.navigationOnHover )
{
this.els.navigation.setStyle( 'top', ( -1 * this.els.navigation.getHeight() ) + 'px' );
}
this.el.clip();
},


initEvents: function ()
{
this.els.navPrev.on( 'click', function ( ev )
{
ev.preventDefault();
var target = ev.getTarget();
target.blur();
if ( Ext.fly( target ).hasCls( 'ux-carousel-nav-disabled' ) ) return;
this.prev();
}, this );


this.els.navNext.on( 'click', function ( ev )
{
ev.preventDefault();
var target = ev.getTarget();
target.blur();
if ( Ext.fly( target ).hasCls( 'ux-carousel-nav-disabled' ) ) return;
this.next();
}, this );


if ( this.showPlayButton )
{
this.els.navPlay.on( 'click', function ( ev )
{
ev.preventDefault();
ev.getTarget().blur();
if ( this.playing )
{
this.pause();
}
else
{
this.play();
}
}, this );
};


if ( this.freezeOnHover )
{
this.els.container.on( 'mouseenter', function ()
{
if ( this.playing )
{
this.fireEvent( 'freeze', this.slides[this.activeSlide] );
console.log( 'mouseenter event on ' + this.els.container.self.getName() );
Ext.TaskManager.stop( this.playTask );
}
}, this );
this.els.container.on( 'mouseleave', function ()
{
if ( this.playing )
{
this.fireEvent( 'unfreeze', this.slides[this.activeSlide] );
Ext.TaskManager.start( this.playTask );
}
}, this, { buffer: ( this.interval / 2 ) * 1000 } );
};


if ( this.navigationOnHover )
{
this.els.container.on( 'mouseenter', function ()
{
if ( !this.navigationShown )
{
this.navigationShown = true;
this.els.navigation.stopAnimation( false ).shift( {
y: this.els.container.getY(),
duration: this.transitionDuration
} )
}
}, this );


this.els.container.on( 'mouseleave', function ()
{
if ( this.navigationShown )
{
this.navigationShown = false;
this.els.navigation.stopAnimation( false ).shift( {
y: this.els.navigation.getHeight() - this.els.container.getY(),
duration: this.transitionDuration
} )
}
}, this );
}


if ( this.interval && this.autoPlay )
{
this.play();
};
},


prev: function ()
{
if ( this.fireEvent( 'beforeprev' ) === false )
{
return;
}
if ( this.pauseOnNavigate )
{
this.pause();
}
this.setSlide( this.activeSlide - 1 );


this.fireEvent( 'prev', this.activeSlide );
return this;
},


next: function ()
{
if ( this.fireEvent( 'beforenext' ) === false )
{
return;
}
if ( this.pauseOnNavigate )
{
this.pause();
}
console.log( this.activeSlide );


this.setSlide( this.activeSlide + 1 );


this.fireEvent( 'next', this.activeSlide );
return this;
},


play: function ()
{
if ( !this.playing )
{
this.playTask = this.playTask || {
run: function ()
{
this.playing = true;
this.setSlide( this.activeSlide + 1 );
},
interval: this.interval * 1000,
scope: this
};


this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask( function ()
{
Ext.TaskManager.start( this.playTask );
}, this );


this.playTaskBuffer.delay( this.interval * 1000 );
this.playing = true;
if ( this.showPlayButton )
{
this.els.navPlay.addCls( 'ux-carousel-playing' );
}
this.fireEvent( 'play' );
}
return this;
},


pause: function ()
{
if ( this.playing )
{
Ext.TaskManager.stop( this.playTask );
this.playTaskBuffer.cancel();
this.playing = false;
if ( this.showPlayButton )
{
this.els.navPlay.removeCls( 'ux-carousel-playing' );
}
this.fireEvent( 'pause' );
}
return this;
},


clear: function ()
{
this.els.slidesWrap.update( '' );
this.slides = [];
this.carouselSize = 0;
this.pause();
return this;
},


add: function ( el, refresh )
{
var item = Ext.fly( el ).appendTo( this.els.slidesWrap ).wrap( { cls: 'ux-carousel-slide' } );
item.setWidth( this.slideWidth + 'px' ).setHeight( this.slideHeight + 'px' );
this.slides.push( item );
if ( refresh )
{
this.refresh();
}
return this;
},


refresh: function ()
{
this.carouselSize = this.slides.length;
this.els.slidesWrap.setWidth(( this.slideWidth * this.carouselSize ) + 'px' );
if ( this.carouselSize > 0 )
{
if ( !this.hideNavigation ) this.els.navigation.show();
this.activeSlide = 0;
this.setSlide( 0, true );
}
return this;
},


setSlide: function ( index, initial )
{
if ( !this.wrap && !this.slides[index] )
{
return;
}
else if ( this.wrap )
{
if ( index < 0 )
{
index = this.carouselSize - 1;
}
else if ( index > this.carouselSize - 1 )
{
index = 0;
}
}
if ( !this.slides[index] )
{
return;
}


this.els.caption.update( this.slides[index].child( ':first-child', true ).title || '' );
var offset = index * this.slideWidth;
if ( !initial )
{
switch ( this.transitionType )
{
case 'fade':
this.slides[index].setOpacity( 0 );
this.slides[this.activeSlide].stopAnimation( false ).fadeOut( {
duration: this.transitionDuration / 2,
callback: function ()
{
this.els.slidesWrap.setStyle( 'left', ( -1 * offset ) + 'px' );
this.slides[this.activeSlide].setOpacity( 1 );
this.slides[index].fadeIn( {
duration: this.transitionDuration / 2
} );
},
scope: this
} )
break;


default:
var xNew = ( -1 * offset ) + this.els.container.getX();
//TODO: check this
console.log( this.els );
this.els.slidesWrap.stopAnimation( false );
this.els.slidesWrap.shift( {
duration: this.transitionDuration,
x: xNew,
easing: this.transitionEasing
} );
console.log( 'dsets' );
break;
}
}
else
{
this.els.slidesWrap.setStyle( 'left', '0' );
}


this.activeSlide = index;
this.updateNav();
this.fireEvent( 'change', this.slides[index], index );
},


updateNav: function ()
{
this.els.navPrev.removeCls( 'ux-carousel-nav-disabled' );
this.els.navNext.removeCls( 'ux-carousel-nav-disabled' );
if ( !this.wrap )
{
if ( this.activeSlide === 0 )
{
this.els.navPrev.addCls( 'ux-carousel-nav-disabled' );
}
if ( this.activeSlide === this.carouselSize - 1 )
{
this.els.navNext.addCls( 'ux-carousel-nav-disabled' );
}
}
}


} );