javascript 在 ExtJS 中使用图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24285215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using icons in ExtJS
提问by Oliver Watkins
I am trying to add icons to my toolbar buttons in extJS. In my case, i want a refresh icon in my button.
我正在尝试向 extJS 中的工具栏按钮添加图标。就我而言，我希望在我的按钮中有一个刷新图标。
Is there an easyand standardway of doing this? I can't seem to be able to find any decent documentation on the web.
有没有一种简单而标准的方法来做到这一点？我似乎无法在网上找到任何像样的文档。
My toolbar button :
我的工具栏按钮：
{
text: 'Reset',
icon: 'refresh',
tooltip: 'Reset Grid Layout'
}
putting refresh here doesn't do anything. There is an empty space in my button where something should be. Ie. it understands 'icon', it doesn't understand 'refresh'.
在这里刷新并没有做任何事情。我的按钮中应该有一个空白区域。IE。它理解“图标”，它不理解“刷新”。
- Do you have to put in the full path to some ExtJS subdirectory?
- Is there some set list of icons you can use?
- 您是否必须输入某些 ExtJS 子目录的完整路径？
- 是否有一些可以使用的图标集列表？
回答by dougajmcdonald
I belive ExtJS or Ext.NET tends to use the fam fam fam silk icon set.
我相信 ExtJS 或 Ext.NET 倾向于使用 fam fam fam Silk 图标集。
http://www.famfamfam.com/lab/icons/silk/
http://www.famfamfam.com/lab/icons/silk/
Typically to use icons on things like buttons, set a css class which points to you icon location e.g.
通常要在按钮之类的东西上使用图标，请设置一个指向您图标位置的 css 类，例如
.myIcon {
background-image: url(path of your image);
}
The on your Ext component you can set the relevant property. This could be iconCls: ''or something similar (depends on the component).
您可以在 Ext 组件上设置相关属性。这可能是iconCls: ''或类似的东西（取决于组件）。
回答by adaskos
You can use
iconCls:and provide a css class that sets the properbackgroundset, along with other information (size, color, etc)You can use
icon:and pass a relative path to your image.There are
glyphsof which I don't know much, but there are some good examples on the web (e.g. this). Basically you load an icon font and set the character code in theglyph:config of the button.And finally there are some really nice icons for panel header, named:
tools. The default theme can be seen here. The Neptune ones are much nicer. Check the Kitchen Sink examples. (if you find their class names you can use them anywhere with some tweaking). Those are defined in your panelconfig.
您可以使用
iconCls:并提供一个 css 类来设置正确的background集合以及其他信息（大小、颜色等）您可以使用
icon:并传递图像的相对路径。其中有一些
glyphs我不太了解，但网上有一些很好的例子（例如this）。基本上你加载一个图标字体并glyph:在按钮的配置中设置字符代码。最后还有一些非常漂亮的面板标题图标，名为：
tools。可以在此处查看默认主题。海王星的要好得多。检查厨房水槽示例。（如果你找到他们的类名，你可以通过一些调整在任何地方使用它们）。这些是在您的面板中定义的config。
Example:
例子：
config: {
....,
tools: [
{type: 'refresh'},
{type: 'save'},
...]
},
More information at the official documentation.
更多信息请参见官方文档。
回答by Oliver Watkins
I did what the @dougajmcdonald recommended.
我做了@dougajmcdonald 推荐的事情。
In my ext-all.cssunderneath this line :
在我的ext-all.css下面这一行：
@import '../ext-theme-gray/ext-theme-gray-all.css';
I added my icon paths :
我添加了我的图标路径：
.myIcon {
background-image: url('../ext-theme-gray/images/grid/columns.gif');
}
I am not sure if this is the best pattern of doing things with icons. There might be a simpler way because I have to use 'ext-theme-gray' for all the URLs. When I change look and feel, then every URL has to be updated. Perhaps there is a way of defining variables in CSS that would take care of this.
我不确定这是否是使用图标做事的最佳模式。可能有一种更简单的方法，因为我必须对所有 URL 使用“ext-theme-gray”。当我改变外观时，每个 URL 都必须更新。也许有一种在 CSS 中定义变量的方法可以解决这个问题。
回答by Arturo Morales Rangel
{
xtype:'button',
iconCls:'fa fa-bars',
}
//fa fa-bars is the link from the icon source, fa fa-bars represents bars icon, try this example in your code for show the icon
You can get more icon types from http://fontawesome.io/icons/
您可以从http://fontawesome.io/icons/获取更多图标类型
回答by Dev
I didn't find in docs something related to default extjs icons usage for tabs. But you can define your custom icon css using iconClsconfig.
我没有在文档中找到与选项卡的默认 extjs 图标用法相关的内容。但是您可以使用iconCls配置来定义您的自定义图标 css 。
{
title: 'Foo',
iconCls:'refreshIconCls'
}
CSS:
CSS：
.refreshIconCls{
background-image:url(../images/refresh.png)!important;
}
回答by Vivek Vardhan
You can use list of icons but only for type Ext.panel.Tool. See API here. It is used using config option type
您可以使用图标列表，但只能用于Ext.panel.Tool类型。请参阅此处的API 。它使用配置选项类型
For, normal buttons, you need to give paths to your image file
对于普通按钮，您需要提供图像文件的路径
Ext.button also has type, but that is not for icons. See here
Ext.button 也有类型，但这不适用于图标。看这里
