ExtJS Carousel实施

时间:2013-12-31 00:37:45

标签: extjs carousel

我正在尝试制作用于显示图像的旋转木马,我从sencha论坛中的某个解决方案中获得了大部分功能。我对代码进行了一些调整,并在第一眼就看到了它。

这是sencha论坛上的原始代码......

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

这对ExtJS 4不起作用,所以我做了一些修改,使它工作,并使它看起来更好(对我的眼睛)。这是它的外观

enter image description here

我确实有一两个问题......

首先,我无法弄清楚如何在我正在显示的图像上添加文本,我设法在中心添加该行文本但我还想为图像添加日期并且应该显示在每个图像容器的顶部。我认为这是非常基本的,但我无法弄清楚如何......我没有完全理解HTML,所以这没有帮助。

其次,最重要的是,当我关闭并重新打开包含此轮播的窗口时,我会遇到一些奇怪的行为。我在ExtJS中的多个视图实例中使用相同的ID之前已经看到过这种行为,但是每当新的轮播窗口打开并且仍然遇到相同的问题时,我已经更改了所有ID以生成新的ID。

当我关闭并重新打开窗口时会发生什么......

enter image description here

关闭旋转木马后我打开的每个窗口都会发生这种情况

最后但并非最不重要!我无法让keydown事件在这个窗口上工作,我不知道为什么。我已经尝试在旋转木马容器上设置监听器而不是窗口,但仍然没有任何触发。

这是我用来创建轮播窗口的代码......

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')
        }
    }
});

这是轮播组件的initComponent,它在窗口中呈现。

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();
},

这是旋转木马使用的图像组件......

 /**
 * @author Aymen ABDALLAH <aymen.abdallah@gmail.com>
 * @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;
}

});

我不想用代码充斥它,所以我限制了我认为可能有用的东西,但可能会有一些缺失,在这种情况下只需告诉我,我将使用代码部分更新帖子你需要。

修改

这是一个链接到sencha小提琴,显示轮播和错误。要查看第二个错误,请单击按钮打开轮播,使用ESC关闭它,然后再次尝试打开它。您会注意到它没有显示,或者显示的内容与我发布的屏幕截图相同。

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

编辑2

刚刚发现问题来自图像,如果我评论这些行:

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
});

我列出的第二个错误消失了。当然这不是解决方案,因为旋转木马不会以这种方式显示任何图像,但我认为对于任何有兴趣帮助的人来说,这可能是一个有用的数据。

1 个答案:

答案 0 :(得分:0)

对于访问此页面的人(我知道它是一个旧帖子),

问题实际上并非第二个视图,第一个视图导致布局错误。

Ext.component.Image类缺少一个渲染函数,用于修复此添加

render: function () {
    return;
}

上课。

不确定如何完全解决其他问题,但您可以将图片组件更改为表单/面板并使用文本,或使用标题标记。