Results 1 to 3 of 3

Thread: Want to select an image from a spritesheet. Dunno my csss. Never done that.

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    462
    Answers
    5
    Vote Rating
    39
      0  

    Default Answered: Want to select an image from a spritesheet. Dunno my csss. Never done that.

    Video conversion generated a spritesheet of thumbnails.
    I would like users to pick the thumbnail they want for their video.

    I am not much for CSS and have never used spritesheets.

    The examples have a DataView image picker or I can invent any number of controls and components.

    What I'm not clear on is how to direct the portion of a spritesheet to display from within extjs.

    I guess the CSS will be like this:

    Code:
    .i_anyimage
    {
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-image: url('/img/sprite.png');
    background-position: -XXpx -YYpx;
    }
    Suppose I have a dataview template or img component in code.

    I'm going to try applying css in code, I expect that is it.

    But if someone has examples off the top of their head, links to consider or better ideas...

    Thanks

  2. background: 'url('+this.url+') '+(i*150)+'px 0'

    Finally. "If greater zero then px must be specified" is apparently the trick.

    One day I will stumble across an explanation.

  3. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    462
    Answers
    5
    Vote Rating
    39
      0  

    Default

    I knew it there would be a "gotcha"

    The html works fine outside extjs.

    Extjs displays the first one, but none of the rest.

    I examine using chrome panel and I see the exact same css, but the background has a line thru it.

    For reasons I do not yet understand....

    Code:
    Ext.define('lib.view.ThumbTable', {
        extend:'Ext.panel.Panel',
    
        requires:[
            'Ext.container.Container'
        ],
    
        layout:{
            type:'table',
            columns:3
        },
    
        config:{
            url:'../../../sprites.jpg'
        },
    
        getItems:function(){
            var i,result=[],thumb={};
            for(i=0;i<12;i++)
            {
                thumb=Ext.create('Ext.container.Container',{
                    html:'iiiiii'+i,
                    style:{
                        width: '150px',
                        height: '150px',
                        background: 'url(../../../sprites.jpg) '+(i*150)+' 0'
                    }
                })
                result.push(thumb)
            }
            return result;
    
        },
    
        initComponent: function() {
            Ext.applyIf(this, {
                items:this.getItems()
            });
            this.callParent(arguments);
        }
    
    })
    So I've tried

    background: 'url('+this.url+') 150 0'
    background: 'url('+this.url+') -150 0'
    background: 'url('+this.url+') 0 150'
    background: 'url('+this.url+') 0 -150'

    The only one that works is "0 0"

    There is something I do not know...

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    462
    Answers
    5
    Vote Rating
    39
      0  

    Default

    background: 'url('+this.url+') '+(i*150)+'px 0'

    Finally. "If greater zero then px must be specified" is apparently the trick.

    One day I will stumble across an explanation.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •