1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    63
    Vote Rating
    0
    Answers
    1
    jbrown13 is on a distinguished road

      0  

    Default Unanswered: Carousel Example, loading images from sprite sheet?

    Unanswered: Carousel Example, loading images from sprite sheet?


    HI All
    This is the Carousel Example in Sencha Touch 2 . My question is how would I load images using a sprite sheet?
    If for example under the Food categore if I change it to a Muf sprite sheet , where would I put the classes the would be in Muf sprite sheet. example .spsp10 the class for the sprite image.
    I would like to load the images from a sprite sheet . But I sure where to put the class for the sprites.
    Thanks
    Jim
    This is my sprite sheet.
    HTML Code:
    .Muf{ background:url("Muf.jpg") top left no-repeat; }
    .spsp10{ width:165px; height:235px; background-position:-10px -10px; }
    .spsp7{ width:400px; height:233px; background-position:-185px -10px; }
    .spsp8{ width:400px; height:233px; background-position:-595px -10px; }
    .spsp6{ width:400px; height:233px; background-position:-1005px -10px; }
    .spsp11{ width:180px; height:180px; background-position:-1415px -10px; }
    .spsp9{ width:320px; height:213px; background-position:-1605px -10px; }
    .spsp5{ width:400px; height:233px; background-position:-1935px -10px; }
    .spsp4{ width:400px; height:233px; background-position:-2345px -10px; }
    .spsp3{ width:400px; height:233px; background-position:-2755px -10px; }
    .spsp2{ width:400px; height:233px; background-position:-3165px -10px; }
    .{ width:400px; height:233px; background-position:-3575px -10px; }
    
    HTML Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': '../../src'
    });
    //</debug>
    
    /**
     * This example demonstrates the Carousel component in Sencha Touch 2.
     *
     * The carousel can run both horizontally and vertically, and in this example in combine both
     * of them together.
     *
     * The final result will be 4 horizontal carousels inside 1 vertical carousel.
     * Each of the horizontal carousels will have a category of images within it.
     */
    Ext.application({
        //first we define the tablet + phone startup screens and the applicaiton icon url
        phoneStartupScreen: 'resources/loading/Homescreen.jpg',
        tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
    
        glossOnIcon: false,
        icon: {
            57: 'resources/icons/icon.png',
            72: 'resources/icons/icon@72.png',
            114: 'resources/icons/icon@2x.png',
            144: 'resources/icons/icon@114.png'
        },
    
        //here we require any components we are using in our application
        requires: [
            'Ext.carousel.Carousel',
            'Ext.Img'
        ],
    
        /**
         * The launch method is called when the browser is ready and the application is ready to
         * launch.
         */
        launch: function() {
            //first we define each of the categories we have for each one of the horixontal carousels
            //these images can be found inside resources/photos/{category_name}/*
            var categories = ['Food', 'Animals', 'Cars', 'Architecture'],
                itemsCountPerCategory = 10,
                horizontalCarousels = [],
                items, i, j, ln, category;
    
            //now we loop through each of the categories
            for (i = 0,ln = categories.length; i < ln; i++) {
                items = [];
                category = categories[i];
    
                for (j = 1; j <= itemsCountPerCategory; j++) {
                    //and push each of the image as an item into the items array
                    //you can see we are using the img xtype which is an image component,
                    //and we just give is a custom cls to style it, and the src
                    //of the image
                    items.push({
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/' + category + '/' + j + '.jpg'
                    });
                }
    
                //now we add the new horizontal carousel for this category
                horizontalCarousels.push({
                    xtype: 'carousel',
    
                    //the direction is horizontal
                    direction: 'horizontal',
    
                    //we turn on direction lock so you cannot scroll diagonally
                    directionLock: true,
    
                    //and give it the items array
                    items: items
                });
            }
    
            //and finally we create the vertical carousel which contains each of the horizontal
            //category carousels above
            Ext.Viewport.add({
                xtype: 'carousel',
    
                //this time direction vertical
                direction: 'vertical',
    
                //and the horizontalCarousels array
                items: horizontalCarousels
            });
        }
    });
    
    

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    Answers
    102
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    If i'm not mistaking, you can set more than one CSS class in the 'cls' property.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    63
    Vote Rating
    0
    Answers
    1
    jbrown13 is on a distinguished road

      0  

    Default


    Thanks

    From the example would I put
    cls: 'my-carousel-item-img', 'Muf',

    where would I put the other classes from the sprite sheet: example image 2 would be class .spsp2

    where would I put this in the code?

    Thanks

    Jim

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    Answers
    102
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    no. cls should look like :

    cls : 'class1 class2 class3'

    Space separated

Thread Participants: 1

Tags for this Thread