1

我想要一个列表详细视图中的轮播面板。我将带有 flex 3 的旋转木马放在面板内。使用此代码，我确保面板项内的 tpl 可以正常工作。但我不知道如何解决旋转木马的问题。

tpl 内面板项目的代码：

updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData); this.getAt(1).setData(newData);
}

我的 WorkDetail.js 的完整代码

Ext.define('Portfolio.view.WorkDetail', {
    extend: 'Ext.Panel',
    xtype: 'workdetail',

    requires: [
        'Ext.carousel.Carousel'
    ],

    config: {
        xtype: 'panel',
        layout: 'hbox',
        align: 'stretch',
        styleHtmlContent: true,
        scrollable: null,

        items: [
            {
                flex:3,
                xtype: 'carousel',
                // HERE THE TLP WORKS
                // tpl: '<img src="{bigImage1}"></img>',
                // style: 'background-color: #456370;',

                items: [
                    {
                        // TPL DON'T WORK
                        tpl: '<img src="{bigImage1}"></img>',
                        style: 'background-color: #E84F17;'
                    },
                    {
                        // TPL DON'T WORK
                        tpl: '<img src="{bigImage2}"></img>',
                        style: 'background-color: #4DBAB6;'
                    },
                    {
                        // TPL DON'T WORK
                        tpl: '<img src="{bigImage3}"></img>',
                        style: 'background-color: #BBB399;',
                    }
                ]
            },
            {
                // HERE THE TLP WORKS
                flex:1,
                tpl: '<p>{workDiscriptionLarge}</p> <p>{workDate}</P> <a href="{hyperLink}">Bekijk de website</a>'
            }
        ]
    },

    updateData: function(newData, oldData) {
  this.down('component').setData(newData);
  this.getAt(0).setData(newData); 
  this.getAt(1).setData(newData); 
    }

});
4

1 回答 1

0 
this.down('component').setData(newData);
this.getAt(0).setData(newData);

这两行将针对您的 Carousel 项目，因此不会填充子项目的模板。

this.getAt(1).setData(newData);

此行将针对您看到模板工作的第二个项目。

您将需要单独定位每个 Carousel 项，并调用每个项的 setData 方法以填充要填充的模板。

// untested :)
var components = this.getAt(0).query('component');

for(var i = 0; i < components.length; i++){
    components[i].setData(newData);
}
于 2014-01-26T21:04:32.243 回答