1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Germany
    Posts
    22
    Answers
    1
    Vote Rating
    0
    pille72 is on a distinguished road

      0  

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

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


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

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    41
    Answers
    3
    Vote Rating
    0
    celwell is on a distinguished road

      0  

    Default


    here is my code for doing that:

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

    Code:
    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);

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar