1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    19
    Vote Rating
    0
    Hasret is on a distinguished road

      0  

    Default Answered: How to get dynamically images from the store to the carousel

    Answered: How to get dynamically images from the store to the carousel


    Hi guys ,
    Im trying to get images from a store , and control the number of the images , and show 12 images for each carousel ,all of that dynamically depending of the number of images on the store , if its up to ex: 12 ,to create an other carousel for the rest ...
    here is my model :

    Code:
    Ext.define("MyApp2.model.ApplicationModel", {
    extend: "Ext.data.Model",
    config: {
        //type:'tree',
        fields: [
        {name: 'id', type: 'auto'},
        {name: 'name', type: 'auto'},
        {name:'icon',type:'image/jpg'}
        
    
    
      ]
    } 
    });
    the store :

    Code:
    var token=localStorage.getItem("access_token");
    Ext.define("MyApp2.store.ApplicationStore", {
    extend: "Ext.data.Store",
    requires: ["Ext.data.proxy.JsonP"],
    config: {
        model: "MyApp2.model.ApplicationModel",
        autoLoad: true,
        id :'ApplicationStr',
        proxy: {
            type: 'jsonp',
            url: 'http://mysite.com/api/applications?format=jsonp&access_token='+token,
            reader: {
                type: 'json',
                rootProperty: 'applications'
                }
            }
    
    
            
        }    
    });
    
    var store = Ext.create('MyApp2.store.ApplicationStore');
    store.getStore('ApplicationStr');
    //var store = Ext.getStore('ApplicationStr');
    
    
                        yourCarousel = Ext.getCmp('carouselid');
                        store.each(function(record) {
                            yourCarousel.add({
                                html: '<img src=' + record.get('icon') + '/>'
                            });
                        });
    & my json response;

    Code:
    {"status":"ok","applications":   [{"id":"894","name":"nameApp","user_id":"256","template_id":"1","status":"3",    "icon":null,"logo":"","publish_status":"0"},  {"id":"769","name":"mymodel","user_id":"256","template_id":"4","status":"3",    "icon":null,"logo":"","publish_status":"0"}
    My view :
    Code:
    Ext.define('MyApp2.view.MainMenu', {
        extend: 'Ext.Panel',
        requires: ['Ext.TitleBar', 'MyApp2.store.ApplicationStore', 'Ext.dataview.List', 'Ext.Img'],
        alias: 'widget.mainmenuview',
        config: {
            layout: {
                type: 'fit'
            },
            items: [{
                    xtype: 'titlebar',
                    title: 'My Apps',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Log Off',
                            itemId: 'logOffButton',
                            align: 'right'
                        }
                    ]
                },
                {
                    xtype: "carousel",
                    id: 'carouselid'
    
    
                }
    
    
            ],
            listeners: [{
                    delegate: '#logOffButton',
                    event: 'tap',
                    fn: 'onLogOffButtonTap'
                }]
        },
        onLogOffButtonTap: function() {
            this.fireEvent('onSignOffCommand');
        }
    });
    
    
    //var imgStore = Ext.getStore('MyApp2.store.ApplicationStore');
    if the icon is null , i have to put a default image .
    Im new to sencha , i dont know how to deal with it .i've tried the code but nothing is diplayed..

  2. The best way to do this would be to calculate the total store items using this code. It adds items from a store to a dataview in groups of 8. You could then add this to your carousel, which would create a multi-item carousel:

    Code:
    var itemsPerPage = 8; // items per page
            var totalpages = Math.ceil(mystore.getCount()/itemsPerPage);
            // create array for our variable number of carousel pages
            var carouselpages = [];
                    // loop over records from store
                    for(var i=1;i<=totalpages;i++) {
                    // get start and end records, based on page
                            var startrecord= (i*itemsPerPage)-itemsPerPage;
                            var endrecord = i==totalpages ? mystore.getCount() : (i*itemsPerPage)-1;
                            // extract records for the current carousel page from the store
                            var recordsforpage = mystore.getRange(startrecord,endrecord)
                            // create a new component which will use the paged data
                            var carouselpage = new Ext.dataview.DataView({
                                fullscreen: true,
                                store: {
                                    fields: [
                                            {name: 'name', type: 'string'},
                                            {name: 'description',  type: 'string'}
                                    ],
                                    data: recordsforpage,
                                },
                                itemTpl: '<div class="productlist-item">name: {name}</div>',
                                scrollable: false,
    })
                            
                            // add our new page to array to add to the carousel
                            carouselpages.push(carouselpage)
                    }
                    
                    this.add(carouselpages);
    Hope this helps,

    :-)

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    Answers
    18
    digeridoopoo will become famous soon enough

      1  

    Default The best way....

    The best way....


    The best way to do this would be to calculate the total store items using this code. It adds items from a store to a dataview in groups of 8. You could then add this to your carousel, which would create a multi-item carousel:

    Code:
    var itemsPerPage = 8; // items per page
            var totalpages = Math.ceil(mystore.getCount()/itemsPerPage);
            // create array for our variable number of carousel pages
            var carouselpages = [];
                    // loop over records from store
                    for(var i=1;i<=totalpages;i++) {
                    // get start and end records, based on page
                            var startrecord= (i*itemsPerPage)-itemsPerPage;
                            var endrecord = i==totalpages ? mystore.getCount() : (i*itemsPerPage)-1;
                            // extract records for the current carousel page from the store
                            var recordsforpage = mystore.getRange(startrecord,endrecord)
                            // create a new component which will use the paged data
                            var carouselpage = new Ext.dataview.DataView({
                                fullscreen: true,
                                store: {
                                    fields: [
                                            {name: 'name', type: 'string'},
                                            {name: 'description',  type: 'string'}
                                    ],
                                    data: recordsforpage,
                                },
                                itemTpl: '<div class="productlist-item">name: {name}</div>',
                                scrollable: false,
    })
                            
                            // add our new page to array to add to the carousel
                            carouselpages.push(carouselpage)
                    }
                    
                    this.add(carouselpages);
    Hope this helps,

    :-)

Thread Participants: 1