ExtJS Carousel Implementation

Question

I'm trying to make a carousel for displaying images, I got most of the functionality from a solution someone in sencha forums came up with. I made a few adjustments to the code and got it working at first glance.

Here's the original code on sencha forums...

http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789

This didn't work on ExtJS 4 so I made a few modifications for it to work and also to make it look better (to my eyes). Here's how it looks

enter image description here

I do have a problem or two though...

First off I can't figure out how to add a text over the images I'm displaying, I managed to add that line of text in the center but I also want to add a date to the images and that should display on top of each image container. I think it's pretty basic, but I can't figure out how... I don't have a full understanding of HTML, so that's not helping.

Secondly, and most important, I'm getting some weird behaviour when I close and reopen the window containing this carousel. I've seen this kind of behaviour before when using the same ID in multiple instances of a view in ExtJS, but I have changed all IDs to generate a new one whenever a new carousel window opens and still experience the same problem.

Here's what happens when I close and reopen the window...

enter image description here

And that happens with every window I open after closing the carousel

And last but not least!! I can't get the keydown event to work on this window, I have no clue why. I've tried setting the listener on the carousel container instead of the window but still get no firing whatsoever.

This is the code I'm using to create the carousel window...

var win = Ext.create('Ext.view.CarouselWindow');
win.show();
Ext.createWidget('carousel',{
    xPos: win.getSize().width/2,
    yPos: win.getSize().height/4,
    FPS: 70,
    reflHeight: 56,
    height:'100%',
    width:'100%',
    reflGap:2,
    bringToFront:true,
    store:store,
    images:store,
    altBox:'imageNameLabel',
    autoRotate: 'no',       
    renderTo: 'carousel-div',
    listeners:{
        keydown:function(){
            console.log('asdasd')
        }
    }
});

This is the initComponent of the carousel component, which is rendered in the window.

initComponent: function(config) {
this.callParent(arguments);

    this.container = this.renderTo ? Ext.get(this.renderTo) : this.up('container');
if (this.xRadius === 0){
    this.xRadius = (this.container.getWidth()/2.3);
}
if (this.yRadius === 0){
    this.yRadius = (this.container.getHeight()/6);
}
this.xCentre = this.xPos;
this.yCentre = this.yPos;

// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/this.FPS;

// Turn on the infoBox
if(this.altBox !== '')
//      Ext.get(this.altBox).applyStyles({display: 'block'});   
if(this.titleBox !== '')
    Ext.get(this.titleBox).applyStyles({display: 'block'}); 
//  
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
this.container.applyStyles({ position:'relative', overflow:'hidden'});

// Setup the store.
this.initStore();


this.setUpContainerListener();

this.innerWrapper = this.container.createChild({
    tag: 'div',
    style: 'position:absolute;width:100%;height:100%;'
});

this.checkImagesLoaded();
},

And here's the Image component that the carousel uses...

 /**
 * @author Aymen ABDALLAH 
 * @docauthor Aymen ABDALLAH
 */
Ext.define('Ext.component.Image', {

config: {
    orgWidth: 400,          
    orgHeight: 400,
    reflHeight: 0,
    reflOpacity: 0,
    itemIndex: 0,       
    image: null,
    reflection: null,
    container: null,                    
    alt: '',
    title: '',
    imageSrc: '',
    imageOK: false                      
},

//  id: '',

constructor: function(config){
    this.initConfig(config);
    this.imageOK = true;
    this.image = new Ext.Element(document.createElement('img'));
    this.image.set({
//          id: this.id,
        src: this.imageSrc,
                    class : 'carousel-image',
        alt: this.alt,
        title: this.title
    });

    this.image.setStyle({position : 'absolute'});   // This seems to reset image width     to 0 on webkit!          
},

setUpReflection: function(){
    if (this.reflHeight > 0)
    {   
        this.reflection = Ext.create('Ext.component.Reflection', {
            imageHeight: this.orgHeight,
            imageWidth: this.orgWidth,
            image: this.image,
            parent: this.container,
            reflHeight: this.reflHeight,
            reflOpacity: this.reflOpacity
        });
    }
},

generateId: function(){
//      return Ext.data.UuidGenerator.create().generate();  
},

getImage: function(){
    return this.image;
}

});

I didn't want to flood this with code so I restricted to what I think might be useful, there might be some missing though, in that case just tell me and I'll update the post with the portion of the code you need.

EDIT

Here's a link to sencha fiddle showing the carousel and the error. To see the second error open the carousel by clicking the button, close it with ESC and then try to open it once again. You'll notice it either doesn't show or it shows like the screenshot I posted.

https://fiddle.sencha.com/#fiddle/2iu

EDIT 2

Just found out the problem comes from the images, if I comment these lines:

this.image = new Ext.Element(document.createElement('img'));
this.image.set({
    id: this.id,
    src: this.imageSrc,
                class : 'carousel-image',
    alt: this.alt,
    title: this.title
});

the second error I listed disappears. Of course this is not a solution as the carousel won't display any image this way, but I thought this could be a useful piece of data for anyone interested in helping.

ExtJS Carousel Implementation

1 Answers