Font-Awesome ExtJS ActionColumn答案

【问题标题】：Font-Awesome ExtJS ActionColumnFont-Awesome ExtJS ActionColumn
【发布时间】：2014-08-29 17:50:07
【问题描述】：

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

当我这样做时，所有其他按钮都可以使用很棒的字体：

 iconCls: 'fa fa-edit'

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

有人知道为什么吗？

编辑

在尝试@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（取自 firebug 检查器）：

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%;
}

【问题讨论】：

标签： css ruby-on-rails extjs font-awesome

【解决方案1】：

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

为了能够使用它，您必须重写 Ext.grid.column.Action *defaultRenderer* 方法，以支持图标旁边的字形配置选项（在您的代码中，您可以决定使用图标 img 或 @987654326 @ 用于任何视图上的每个操作）。

此覆盖的工作（在 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 += '<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}

希望对你有帮助；）

【讨论】：

我放假了。星期一我会调查这个并给你一些反馈。谢谢。
好的，星期一过去了，你有机会测试它吗？我很好奇；）
对不起。今天只能测试这个。我没有得到图标，而是 ?x0f40;代替文字。我可以看到它使用 FontAwesome 作为它的字体。但不渲染图标。（看我更新的问题）
你如何定义你的字形值？这是使用上面的确切代码的工作小提琴：fiddle.sencha.com/#fiddle/agf
glyph: 0xf040，但我用 Extjs 4.2 版测试了你的小提琴并且它工作正常。我一定在这里遗漏了一些东西。我会仔细看看，然后再回来找你。好吗？

【解决方案2】：

您可以简单地从 actioncolumn 项的 getClass 中返回 'fa fa-edit' 类，如下所示：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我将 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 += '<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="' + me.actionIconCls + ' ' + 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;
    }    
});

你可以这么简单地使用它：

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

希望对你有所帮助；）

【讨论】：

【解决方案5】：

如果您在 4.0 - 4.1 中，看起来覆盖不起作用。我走的是阻力最小的路径，只是通过http://fa2png.io/ 将图标转换为 png 格式，然后将分配的类定义为 css 中的背景图像 url。

【讨论】：