Question

I’m currently working on a project where we recieved all our icons in 1 sprite file. I have never ever used sprites (and i’m pretty new to extjs)
I cannot find a decent example of how to transform the following code (which uses 1 upload.png) into using a spritefile (icons.png)

{
    xtype: 'actioncolumn',
    cls: 'tasks-icon-column-header tasks-upload-column-header',
    width: 24,
    icon: 'images/upload.png',
    iconCls: 'x-hidden',
    tooltip: 'Upload',
    menuDisabled: true,
    sortable: false
    handler: Ext.bind(me.handleUploadClick, me)
}

Answer 1

You need to define class in your css file and define the background image and position of your icon in sprite. For example, if you have icons like this, do something like below to define your class and show only google icon:

.google_icon {
    background:url(http://start.ubuntu.com/12.04/sprite.png) -10px -310px;
    height:38px;
}​

and use this class in your code like this:

iconCls: 'google_icon',

you also need to remove this line:

icon: 'images/upload.png'

I hope it helps!