Results 1 to 2 of 2

Thread: Dynamically Changing Items in a Carousel

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    London, UK
    Vote Rating

    Default Dynamically Changing Items in a Carousel

    Hey guys,

    New to Sencha Touch and the MVC model having slaved away at an app last year using JQTouch. I'm highly impressed with the performance of the app I'm coding so far, I can't believe I didn't try Sencha this time last year - huge mistake!

    I haven't got a whole lot of experience coding in MVC and want to get things right from the start - so I have a problem which serves as a good example I think if someone can tell me how they'd approach it.

    I have a TabPanel. On the first tab is a numeric field (let's call it's value X). On the second tab is a carousel. I want X number of forms in the carousel - so whenever the value of the numeric field changes, I want to add or remove items from the carousel.

    My approach at the moment betrays my background of non-MVC!! On the TabPanel class which I've extended, I create an array to store the forms:

    this.carouselForms = [];
    I also have extended the Ext.form.FormPanel class to a new class; each form in the carousel is an instance of this class.

    App.views.CarouselForm = Ext.extend(Ext.form.FormPanel, { ... });
    Then every time the numeric field is updated, I'm using a controller to call a method on the view to try to add or remove instances of App.views.CarouselForm into the this.carouselForms array, but I can't find a way to get this to work. Nor do I particularly want to as I'm fairly sure it's a distance from best practice!

    if(X > this.carouselForms.length)
          while(X > this.carouselForms.length) // need to add forms
              new App.views.CarouselForm()
        else if(X < this.carouselForms.length) // need to remove forms
          while(X < this.carouselForms.length)
        /*Ext.apply(this.carousel, {
          items: this.carouselForms
    nb. the above isn't my actual code so may have syntax errors - it's just example code of the principle I'm working around now!

    Any help greatly appreciated - thank you sencha touchers!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    To change to an item in a Carousel, you should use setActiveItem on the Carousel. To add an item, you can use add or insert on the carousel.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts