【发布时间】：2013-12-31 00:37:44
【问题描述】：
我正在尝试制作一个用于显示图像的轮播，我从 sencha 论坛中有人提出的解决方案中获得了大部分功能。我对代码进行了一些调整，乍一看就可以正常工作。
这是sencha论坛上的原始代码...
http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789
这在 ExtJS 4 上不起作用，因此我对其进行了一些修改以使其工作并使其看起来更好（在我看来）。这是它的外观
我确实有一两个问题...
首先我不知道如何在我正在显示的图像上添加文本，我设法在中心添加了那行文本，但我还想在图像中添加一个日期并且应该显示在每个图像容器的顶部。我认为这是非常基本的，但我不知道如何......我对 HTML 没有完全了解，所以这没有帮助。
其次，也是最重要的，当我关闭并重新打开包含此轮播的窗口时，我会遇到一些奇怪的行为。我之前在 ExtJS 的视图的多个实例中使用相同的 ID 时已经看到过这种行为，但是我已经更改了所有 ID 以在新的轮播窗口打开时生成一个新的 ID，但仍然遇到同样的问题。
当我关闭并重新打开窗口时会发生以下情况...
关闭轮播后我打开的每个窗口都会发生这种情况
最后但并非最不重要！我无法让 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();
},
这是轮播使用的 Image 组件...
/**
* @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 fiddle 的链接，显示轮播和错误。要查看第二个错误，请单击按钮打开轮播，用 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
});
我列出的第二个错误消失了。当然，这不是一个解决方案，因为轮播不会以这种方式显示任何图像，但我认为这对于任何有兴趣提供帮助的人来说都是有用的数据。
【问题讨论】：
-
我还不如碰这个...