我已经为此工作了好几天,但我有限的 JS 知识似乎伤害了我。
我正在我的 ST2 应用程序中创建一个动态 Ext.Carousel 组件,该组件基于 Store 文件的内容。
这一切都很好,但无论如何我都会展示代码,这样就没有什么可以想象的了:
Ext.getStore('DeviceStore').load(
function(i) {
Ext.each(i, function(i) {
if (i._data.name == 'Audio Ring') {
var carousel = Ext.ComponentManager.get('speakerCarousel');
var items = [];
Ext.each(i.raw.speakers, function(speaker) {
items.push({
sci: Ext.create('SmartCore.view.SpeakerCarouselItem', {
speakerId: speaker.speakerid,
speakerName: speaker.speakername,
speakerEnabled: speaker.speakerenabled
})
});
});
carousel.setItems(items);
}
});
})
现在,这会将适当数量的项目添加到轮播中。它们显示,但没有我指定的内容:
这是旋转木马本身:
Ext.define('SmartCore.view.SpeakerCarousel', {
extend: 'Ext.Carousel',
xtype: 'speakerCarousel',
config: {
id: 'speakerCarousel',
layout: 'fit',
listeners: {
activeitemchange: function(carousel, item) {
console.log(item);
}
}
}
});
这是项目类,我想将商店中的数据填充到:
Ext.define("SmartCore.view.SpeakerCarouselItem", {
extend: Ext.Panel,
xtype: 'speakerCarouselItem',
config: {
title:'SpeakerCarouselItem',
styleHtmlContent: true,
layout: 'fit'
},
constructor : function(param) {
this.callParent(param);
this.add(
{
layout: 'panel',
style: 'background-color: #759E60;',
html: 'hello'
}
)
}
});
同样,正确数量的项目显示在轮播 (11) 中,但内容不可见,背景颜色也未更改。当我在浏览器中检查 console.log(item) 时,项目在轮播对象内显示为 innerItems。
任何帮助是极大的赞赏!!