如何在 Sencha 中动态加载轮播项目

Question

我的产品视图有问题。我想显示产品数据。每个产品都是一个带有图像和文字的“盒子”。我想在一个面板上显示六种产品。事实上，我有很多产品，我想要一个“旋转木马式的视图”。我的想法如下：在面板上放置 6 个产品。加载 3 个面板并将每个面板作为轮播项目放置，这样我就可以滑动到另一个“页面”。

为了节省性能，我尝试在轮播中始终只有 3 个项目。活动的“页面”和之前的页面，以及之后的页面，这样我就可以向左/向右滑动并且可以加载下一页。

我试图将我的逻辑放在轮播的“onActiveItemChange”-Listener 中，但我在添加/删除轮播项目时遇到了很多问题。所以我的问题是有可能做我想做的事吗？

还有更好的选择吗？当然我的数据在商店里，但我不想要那个标准的列表视图。

另一个问题：因为我第一次尝试使用轮播失败，所以我尝试构建一个带有面板的 Ext.Container（卡片布局）。但是如何才能在 Panel 上收听滑动事件？？？

感谢您的帮助；-)

Answer 1

即使我也在做同样的事情，使用旋转木马和商店。轮播的每一页都是一个视图（面板），它有 4/6 个子视图（面板）。在商店加载时，我正在创建这些孩子，然后将它们分成页面并将这些页面添加到轮播中。

这对我来说很好，并且在 activeItemChange 上我正在加载更多页面：

    activeitemchange: function(container, value, oldValue, eOpts) {
        var activeItemIndex = container.getActiveIndex();
        var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
        if ((activeItemIndex + 1 == galleryTotal)) {
            console.log("At last page, time to load");
            var store = this.config.store;
            store.nextPage({ addRecords: true });
        }
    }

Answer 2

我想我理解你的问题。假设您有 3 个项目，并且您总是查看中间的一个（当您向前移动时，项目 0 被销毁并创建了一个项目）。并假设每个项目都有一个与其在列表中的位置相关联的 id。

var current_item = Ext.getCmp('carousel_name').getActiveItem().getId();
current_item = Number(current_item.replace('item', ''));

//Objects to create
var next_item = current_item + 1;
var previous_item = current_item - 1;

//Objects to destroy
var next2_item = current_item + 2;
var previous2_item = current_item - 2;

//Create items
var createItem = function(item_location, type){
    var carousel_item = create_content(item_location);

    if(type == 'next'){
        Ext.getCmp('carousel_name').add(carousel_item);
    }else if(type == 'previous'){
        Ext.getCmp('carousel_name').insert(0, carousel_item);
        Ext.getCmp('carousel_name').setActiveItem(1);
    }
}
createItem(next_item,'next');
createItem(previous_item,'previous');

//Destroy items
if(Ext.getCmp('item'+previous2_item)){
    Ext.getCmp('carousel_name').getItems().items[0].destroy();//This is a hack, for some reason with the above commented out line, the item was getting destroyed but wasn't being removed from carousel_name
}
if(Ext.getCmp('item'+next2_item)){
    Ext.getCmp('carousel_name').getItems().items[Ext.getCmp('carousel_name').getMaxItemIndex()].destroy();//This is a hack, consistency with previous destroy (above)
}