1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    sealpond is on a distinguished road

      0  

    Default Answered: Move items from store to carousel

    Answered: Move items from store to carousel


    I have manage to use a listener to fetch the data i want from a store but cant figure out how to move it to the carousel i defined. Ive looked at the examples in the download files that comes with sencha but cant change my code to match it. Can anyone point me in the right direction?

    My view:


    Code:
    var carousel = Ext.define('App.view.Products', {
      extend: 'Ext.Carousel',
      xtype: 'productspage',
      
      config: {
        title: 'Product',
        iconCls: 'star',
        defaults: {
          styleHtmlContent: true
        }
      }
     });
    
    
    var myStore = Ext.create('Ext.data.Store', {
      model: 'App.model.Event',
      autoLoad: true,
     
      proxy: {
        type: 'scripttag',
        url : url
      },
      listeners: {
        load: function(store, records, index) {
          items = [];
          for (var i=0; i<records.length; i++) {
            items.push({
              xtype: 'image',
              cls: 'my-carousel-item-img',
              html: '<img src="' + records[0].data.event_image + '">'
            });
          }
         }
      }
    });

  2. If you have the carousel already created, then right after your for loop you can do this:

    Code:
    carousel.add(items);
    items can be a single object or an array of objects like in your case.

    If the carousel is not created then you need to create the carousel:

    Code:
    new Ext.carousel.Carousel({
        items : items
    });
    Of course you may need fullscreen or add the carousel to a component or whatever your application needs.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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


    So after your for loop in the store's load listener is where you would either create the carousel or if the carousel is already created then you can simple add the items array to 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.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    sealpond is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    So after your for loop in the store's load listener is where you would either create the carousel or if the carousel is already created then you can simple add the items array to the carousel.
    im a bit lost on how to add the items. Do i have to write an function in the carousel to recive the items? and then use something like carousel.add(items). Are there any examples on how to do that i can check? I really want to understand this setup

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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


    If you have the carousel already created, then right after your for loop you can do this:

    Code:
    carousel.add(items);
    items can be a single object or an array of objects like in your case.

    If the carousel is not created then you need to create the carousel:

    Code:
    new Ext.carousel.Carousel({
        items : items
    });
    Of course you may need fullscreen or add the carousel to a component or whatever your application needs.
    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.

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    1
    Answers
    1
    msweltzdk is on a distinguished road

      0  

    Default


    Looking at the code you supplied, I think I found an error in there somewhere. I think you should have the i (marked with red in the code below), to not just add the first record in your results to the array.

    Code:
    listeners: { load: function(store, records, index) { items = []; for (var i=0; i<records.length; i++) { items.push({ xtype: 'image', cls: 'my-carousel-item-img', html: '<img src="' + records[i].data.event_image + '">' }); } } }
    Last edited by msweltzdk; 15 Feb 2012 at 4:40 AM. Reason: removed advice on adding view to carousel, mitchellsimoens was faster.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    sealpond is on a distinguished road

      0  

    Default


    Quote Originally Posted by msweltzdk View Post
    Looking at the code you supplied, I think I found an error in there somewhere. I think you should have the i (marked with red in the code below), to not just add the first record in your results to the array.

    Code:
    listeners: { load: function(store, records, index) { items = []; for (var i=0; i<records.length; i++) { items.push({ xtype: 'image', cls: 'my-carousel-item-img', html: '<img src="' + records[i].data.event_image + '">' }); } } }
    thanks i totally missed that

  8. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    1
    Answers
    1
    msweltzdk is on a distinguished road

      0  

    Default


    Np, I just hoped that it could clear some possible headaches in the future if you encountered any errors.

Thread Participants: 2