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

Posted 2023-02-25

【中文标题】如何在 Sencha 中动态加载轮播项目

【英文标题】：How to dynamically load carousel items in Sencha

【发布时间】：2013-02-04 22:00:18

【问题描述】：

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

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

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

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

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

感谢您的帮助；-)

【问题讨论】：

我目前正在这样做，它或多或少有效（有一些怪癖）。你遇到过什么样的问题？

我尝试一次只拥有 3 个面板。所以在删除一个项目时，轮播的索引是新的。如果我删除所有项目并添加 3 个面板，我希望 activePanel 获得“白屏”。添加新面板后第一次滑动后，将显示活动面板..

【参考方案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 );
        
    

【讨论】：

我明白你在做什么。但是您只在下一个面板中填写数据。我试图尽可能少地保留 DOM，因为我不知道如果我有大约 100 页会怎样？所以我只想一次只有 3 个面板。一个在 activeItem 之前，一个在 activeItem 之后。从 activeItem 更改时，我尝试动态加载下一个/上一个面板。但我会测试你的解决方案;-)

【参考方案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)

【讨论】：

这是我一直在寻找的，虽然我不会使用 Ext.getCmp() 而是我的控制器的参考。非常感谢！