Question

I have a problem with my product view. I want to display product data. each product is a “box” with an image and text. I want to display six products on a panel. As of the fact that i have many products i want to have a “carousel like view”. My idea was the following: Place 6 products on a panel. Load 3 panels and place each panel as a carousel item so that i can swipe to get to another “page”.

To save performance I tried to always have only 3 items in the carousel. The active “page” and the page before, and the page after, so that I can swipe to left/right and the next page can be loaded.

I tried to put my logic in the “onActiveItemChange”-Listener of the carousel, but I had massive problems with adding/removing carousel items. So my Question is is it possible to do what i want to accomplish?

Is there a better alternative? Of course my data is in a store, but I don’t want that standard list view.

Another Question: Because my first attempt with the carousel failed i tried to build a Ext.Container (card layout) with the panels on it. But how can I listen to a swipe event on a Panel???

thanks for help 😉

Answer 1

I think I understand your issue. Assuming you’ve got 3 items and you’re always viewing the middle one (as you move forward, item 0 gets destroyed and one item gets created). And assuming that each item has an id associated with its location in the list.

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)
}