这是在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();
},
这里是轮播组件使用的图像组件...
/**
* @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展示carousel和错误的链接。要查看第二个错误，请单击按钮打开carousel，然后按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
});
我列出的第二个错误已经消失了。当然这不是一个解决方案，因为这样旋转木马将无法显示任何图像，但我认为这可能对任何有兴趣帮助的人来说是有用的数据。