1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    45
    Vote Rating
    0
    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    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
    45
    Vote Rating
    0
    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi