PDA

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



stewardsencha
21 Dec 2012, 1:13 PM
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:



.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

stewardsencha
22 Dec 2012, 8:52 AM
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....



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...

stewardsencha
22 Dec 2012, 9:01 AM
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.