Product view in dynamic carousel, can't get to work!

[pille72]

hello guys 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 ;-)

[celwell]

here is my code for doing that:

'index' is starting index relative to beginning of 'items' array ( which is an array of carousel items ).

var gallery;


gallery = Ext.create('Ext.Carousel', {
  id: 'gallery',
  fullscreen: true,
  listeners: {
    activeitemchange: function(c, value, oldValue, eOpts) {
      this.getActiveItem().removeCls('hide-details');
      if ((value != null) && (oldValue != null)) {
        if (this.getActiveIndex() === 0) {
          if (items[this.leftIndex - 1] != null) {
            this.leftIndex -= 1;
            this.insert(0, items[this.leftIndex]);
          }
          if (items[this.leftIndex - 1] != null) {
            this.leftIndex -= 1;
            return this.insert(0, items[this.leftIndex]);
          }
        } else if (this.getActiveIndex() === this.getItems().length - 1) {
          if (items[this.rightIndex + 1] != null) {
            this.rightIndex += 1;
            this.add(items[this.rightIndex]);
          }
          if (items[this.rightIndex + 1] != null) {
            this.rightIndex += 1;
            return this.add(items[this.rightIndex]);
          }
        }
      }
    }
  }
});


gallery.add(items[index]);


gallery.rightIndex = index;


gallery.leftIndex = index;


if (items[index + 1] != null) {
  gallery.rightIndex += 1;
  gallery.add(items[gallery.rightIndex]);
}


if (items[index - 1] != null) {
  gallery.leftIndex -= 1;
  gallery.insert(0, items[gallery.leftIndex]);
  gallery.setActiveItem(1);
} else {
  gallery.setActiveItem(0);
}


this.getMainContainer().setActiveItem(gallery);