1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    498
    Answers
    25
    Vote Rating
    51
    shepsii has a spectacular aura about shepsii has a spectacular aura about shepsii has a spectacular aura about

      0  

    Default Unanswered: Dynamically Changing Items in a Carousel

    Unanswered: 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:

    Code:
    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.

    Code:
    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!

    Code:
    if(X > this.carouselForms.length)
        {
          while(X > this.carouselForms.length) // need to add forms
            this.carouselForms.unshift(
              new App.views.CarouselForm()
            );
        }
        else if(X < this.carouselForms.length) // need to remove forms
        {
          while(X < this.carouselForms.length)
            this.carouselForms.shift();
        }
        
        /*Ext.apply(this.carousel, {
          items: this.carouselForms
        });*/
        this.carousel.doLayout();
    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!
    Simon

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Answers
    3490
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1