Question

我目前正在开展一个项目，我们收到了1个精灵文件中的所有图标。我从来没有使用精灵（我对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图标：

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

并在您的代码中使用此类：

iconCls: 'google_icon',

您还需要删除此行：

icon: 'images/upload.png'

我希望它有所帮助！

在extjs中使用Sprite

1 个答案: