2

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

1 回答 1

2

您需要在 css 文件中定义类，并在 sprite 中定义图标的背景图像和位置。例如，如果您有这样的图标，请执行以下操作来定义您的类并仅显示 google 图标：

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

并在你的代码中使用这个类，如下所示：

iconCls: 'google_icon',

您还需要删除此行：

icon: 'images/upload.png'

我希望它有帮助！

于 2012-09-05T10:38:21.483 回答