Font-Awesome ExtJS ActionColumn

我在我的应用程序中使用FontAwesome和ExtJS。

当我这样做时，所有其他按钮工作正常，字体很棒：

iconCls: 'fa fa-edit' 

但是当在actioncolumn中使用相同的配置（允许您将按钮放在网格上的组件）时，图标就不会出现。

有谁知道为什么？

编辑

在尝试了@qdev之后回答：我只是看到了一个？＃f040; 呈现的文字（蓝色）。

为操作列按钮生成的HTML：

  xf040; 

CSS（取自萤火虫检查员）：

 element.style { font-family: FontAwesome; } *, *:before, *:after { box-sizing: border-box; } *, *:before, *:after { box-sizing: border-box; } .x-action-col-icon { cursor: pointer; height: 16px; width: 16px; } .x-border-box, .x-border-box * { box-sizing: border-box; } .x-action-col-glyph { color: #9bc8e9; font-size: 16px; line-height: 16px; width: 20px; } *, *:before, *:after { box-sizing: border-box; } element.style { text-align: center; } .x-grid-cell-inner-action-col { font-size: 0; line-height: 0; } .x-grid-cell-inner { white-space: nowrap; } .x-grid-cell { font: 11px/13px tahoma,arial,verdana,sans-serif; } .x-unselectable { cursor: default; } .x-grid-table { border-collapse: separate; } .x-unselectable { cursor: default; } .x-panel-body-default { color: black; font-size: 12px; } .x-panel-body-default { color: black; font-size: 12px; } .x-panel-body-default { color: black; font-size: 12px; } .x-panel-body-default { color: black; font-size: 12px; } .x-panel-body-default { color: black; font-size: 12px; } .x-panel-body-default { color: black; font-size: 12px; } .x-body { color: black; font-family: tahoma,arial,verdana,sans-serif; font-size: 12px; } body { color: #222222; cursor: default; font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; font-style: normal; font-weight: normal; line-height: 150%; } html, body { font-size: 100%; } html, body { font-size: 100%; } 

Answer 1

这是因为网格操作列图标呈现为IMG标记，其接受图标（路径）作为选项。

为了能够使用它，你必须覆盖Ext.grid.column.Action *defaultRenderer*方法，以支持icon旁边的字形配置选项（在你的代码上你可以决定你用图标img或glyph为每个任何观点的行动）。

工作（在ExtJS 5.0.1上测试，但我认为它也适用于ExtJS 4）代码用于此覆盖：

 Ext.define('MyApp.overrides.grid.column.Action', { override: 'Ext.grid.column.Action', // overridden to implement defaultRenderer: function(v, meta, record, rowIdx, colIdx, store, view){ var me = this, prefix = Ext.baseCSSPrefix, scope = me.origScope || me, items = me.items, len = items.length, i = 0, item, ret, disabled, tooltip, glyph, glyphParts, glyphFontFamily; // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!) // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning // we will pass an incorrect value to getClass/getTip ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : ''; meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; for (; i < len; i++) { item = items[i]; disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false); tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null)); glyph = item.glyph; // Only process the item action setup once. if (!item.hasActionConfiguration) { // Apply our documented default to all items item.stopSelection = me.stopSelection; item.disable = Ext.Function.bind(me.disableAction, me, [i], 0); item.enable = Ext.Function.bind(me.enableAction, me, [i], 0); item.hasActionConfiguration = true; } if (glyph) { if (typeof glyph === 'string') { glyphParts = glyph.split('@'); glyph = glyphParts[0]; glyphFontFamily = glyphParts[1]; } else { glyphFontFamily = Ext._glyphFontFamily; } ret += '&#' + glyph + ';'; } else { ret += ''; } } return ret; } }); 

如果您不知道放置或加载它的位置，您可以在互联网上找到，但在appFolder/overrides/grid/column/Action.js cmd生成的应用程序上，您只需将其放在appFolder/overrides/grid/column/Action.js ，并自动加载框架。

然后你必须调整一些CSS（我在主视口的自定义CSS中添加）。 如果没有这个，你将看不到glyps，我想你会明白为什么看下面的代码：

 .x-action-col-glyph {font-size:16px; line-height:16px; color:#9BC8E9; width:20px} .x-action-col-glyph:hover{color:#3892D3} 

我还成功地做了另一个很好的技巧：默认情况下为所有行隐藏动作图标，并仅在hover的行/记录上显示它们。

您可以通过使用图标/字形的getClass配置函数，通过添加x-hidden-display （在较旧的ExtJS版本上可能是x-hide-display ）类来选择使用此位置，仅在您想要的视图上使用，如下所示：

 { glyph: 0xf055, tooltip: 'Add', getClass: function(){return 'x-hidden-display'} } 

…然后仅使用CSS显示hover/选定行的所有图标：

 .x-grid-item-over .x-hidden-display, .x-grid-item-selected .x-hidden-display{display:inline-block !important} 

我希望这可以帮助你 ;）

Answer 2

我最近创建了这个新应用程序，它可以帮助您准备可以分配给iconCls自定义图标。 它为您的Sencha应用程序生成_icons.scss文件。 我只用Sencha Touch进行了测试，但我认为它也适用于ExtJS。 README解释了在Ico Moon网站上创建图标的步骤，并使用该工具将Ico Moon项目文件转换为SCSS以便在Sencha中使用。 它还与Sencha Architect Touch项目进行了测试。

• https://github.com/tohagan/sencha-ico-moon

如果您将它用于ExtJS，请告诉我它是否有效。 谢谢。

Answer 3

我将getGlyph（ 类似于图标的getClass ）添加到qdev解决方案中。 这是非常简单的解决方案，但工作完美。

是只有3行添加做qdev解决方案：

  if(Ext.isFunction(item.getGlyph)){ glyph = item.getGlyph.apply(item.scope || scope, arguments); }else{ glyph = item.glyph; } 

完成覆盖代码：

 Ext.define('corporateCms.overrides.grid.column.Action', { override: 'Ext.grid.column.Action', // overridden to implement defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store, view) { var me = this, prefix = Ext.baseCSSPrefix, scope = me.origScope || me, items = me.items, len = items.length, i = 0, item, ret, disabled, tooltip,glyph, glyphParts, glyphFontFamily; // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!) // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning // we will pass an incorrect value to getClass/getTip ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : ''; cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; for (; i < len; i++) { item = items[i]; disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false); tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null)); if(Ext.isFunction(item.getGlyph)){ glyph = item.getGlyph.apply(item.scope || scope, arguments); }else{ glyph = item.glyph; } // Only process the item action setup once. if (!item.hasActionConfiguration) { // Apply our documented default to all items item.stopSelection = me.stopSelection; item.disable = Ext.Function.bind(me.disableAction, me, [i], 0); item.enable = Ext.Function.bind(me.enableAction, me, [i], 0); item.hasActionConfiguration = true; } if (glyph ) { if (typeof glyph === 'string') { glyphParts = glyph.split('@'); glyph = glyphParts[0]; glyphFontFamily = glyphParts[1]; } else { glyphFontFamily = Ext._glyphFontFamily; } ret += '&#' + glyph + ';'; } else { ret += ''; } } return ret; } }); 

你可以像使用它一样简单：

  getGlyph: function(v, meta, rec) { if (rec.get('access')) { return 'xf067@FontAwesome'; } else { return 'xf068@FontAwesome'; } }, 

我希望这可以帮助你 ;）

Answer 4

您可以从actioncolumn项的getClass返回’fa fa-edit’类，如下所示：

 { xtype: 'actioncolumn', items: [{ getClass: function () { return 'x-fa fa-users'; } }] } 

Answer 5

如果你在4.0 – 4.1中，看起来覆盖不起作用。 我走了阻力最小的路径，然后通过http://fa2png.io/将图标设置为png格式，然后将指定的类定义为css中的背景图像url。