Question

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

为了保存性能，我试图在转盘中始终只有3个项目。活动的“页面”和之前的页面以及之后的页面，以便我可以向左/向右滑动，并且可以加载下一页。

我试图将我的逻辑放在旋转木马的“onActiveItemChange”-Listener中，但我在添加/删除轮播项目方面存在很大问题。所以我的问题是我可以做我想要完成的事情吗？

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

另一个问题：因为我第一次尝试使用旋转木马失败了，我试图用它上面的面板构建一个Ext.Container（卡片布局）。但是我怎么能在Panel上听一下滑动事件???

感谢您的帮助; - ）

Answer 1

即使我也这样做，使用旋转木马＆amp;一家商店。轮播的每一页都是一个视图（面板），它有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)
}

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

2 个答案: