我在我的应用程序中使用FontAwesome和ExtJS.
当我这样做时,所有其他按钮工作正常,字体很棒：
iconCls: 'fa fa-edit'
例如.
但是当在actioncolumn(允许你在网格上按钮的组件)中使用相同的配置时,图标就不会出现.
有谁知道为什么？
编辑
在尝试了@qdev之后回答：我只是看到了一个？#f040;呈现的文字(蓝色).
为操作列按钮生成的HTML：
<span data-qtip="Edita registro" style="font-family:FontAwesome" class="x-action-col-icon x-action-col-glyph x-action-col-2 " title="" role="button">�xf040;</span>
CSS(取自firebuh检查员)：
element.style {
font-family: FontAwesome;
}
*,*:before,*:after {
Box-sizing: border-Box;
}
*,*: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;
}
*,*: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,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%;
}
解决方法
这是因为网格操作列图标呈现为IMG标记,其接受图标(路径)作为选项.
为了能够使用它,你必须覆盖Ext.grid.column.Action * defaultRenderer *方法,以支持icon旁边的字形配置选项(在你的代码上你可以决定你用图标img或字形为每个任何观点的行动).
工作(在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,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,0);
item.hasActionConfiguration = true;
}
if (glyph) {
if (typeof glyph === 'string') {
glyPHParts = glyph.split('@');
glyph = glyPHParts[0];
glyphFontFamily = glyPHParts[1];
} else {
glyphFontFamily = Ext._glyphFontFamily;
}
ret += '<span role="button" title="' + (item.altText || me.altText) + '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-glyph ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope,arguments) : (item.iconCls || me.iconCls || '')) + '"' +
' style="font-family:' + glyphFontFamily + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + '>&#' + glyph + ';</span>';
} else {
ret += '<img role="button" alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope,arguments) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
}
}
return ret;
}
});
如果您不知道放置或加载它的位置,您可以在互联网上找到,但在sencha 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}
我还成功地做了另一个很好的技巧：默认情况下为所有行隐藏动作图标,并仅在悬停的行/记录上显示它们.
您可以通过使用图标/字形的getClass配置函数,通过添加x-hidden-display(在较旧的ExtJS版本上可能是x-hide-display)类来选择使用此位置,仅在您想要的视图上使用,如下所示：
{
glyph: 0xf055,tooltip: 'Add',getClass: function(){return 'x-hidden-display'}
}
…然后仅使用CSS显示悬停/选定行的所有图标：
.x-grid-item-over .x-hidden-display,.x-grid-item-selected .x-hidden-display{display:inline-block !important}
我希望这可以帮助你
