css - 在 extjs 中使用 Sprite

Question

我目前正在开展一个元素，我们在 1 个 sprite 文件中收到了所有图标。我从来没有使用过 Sprite (而且我对 extjs 很陌生)我找不到一个像样的例子来说明如何将以下代码(使用 1 个 upload.png)转换为使用 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

您需要在您的 css 文件中定义类，并在 sprite 中定义图标的背景图像和位置。例如，如果您有类似 this 的图标，做类似下面的事情来定义你的类并只显示谷歌图标:

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

并像这样在您的代码中使用此类:

iconCls: 'google_icon',

你还需要删除这一行:

icon: 'images/upload.png'

希望对您有所帮助!