Font-Awesome ExtJS ActionColumn

Question

I'm Using FontAwesome with ExtJS in my app.

All other buttons are working fine with font awesome when I do this:

 iconCls: 'fa fa-edit'

But when using the same configuration in the actioncolumn (Component that allow you to put buttons on a Grid) the icon simply doesn't appear.

Does anyone have an idea why?

EDIT

After trying @qdev answer: I'm just seeing a ?#f040; text rendered (in blue).

The generated HTML for the action column button:

<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 (Taken from firebug inspector):

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

I've recently created this new app that will help you to prepare custom icons that you can assign to iconCls. It generates the _icons.scss file for your Sencha apps. I've tested it with Sencha Touch only but I think it should also work with ExtJS. The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha. It has also been tested with Sencha Architect Touch projects.

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

If you use it for ExtJS please tell me if it works. Thanks.

Answer 2

You can simply return 'fa fa-edit' class from the actioncolumn item's getClass as following:

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

Answer 3

I add getGlyph (similar to getClass for icons) to qdev solution. It is very simple solution but works perfect.

Is is just 3 lines add do qdev solution:

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

Complete overrides code:

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

You can use it as simple as:

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

I hope this helps you ;)

Answer 4

This is because grid action column icons are rendered as IMG tags which accepts icon (path) as option.

In order to be able to use this, you have to override Ext.grid.column.Action *defaultRenderer* method, to support glyph config option beside icon (and on your code you can decide rather you go with icon img or glyph for each action on any view).

The working (tested on ExtJS 5.0.1 but I think it works on ExtJS 4 as well) code for this override:

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

If you don't know where to put or load it, you can find on the internet, but on a sencha cmd generated app you simply put it in appFolder/overrides/grid/column/Action.js and will automatically be loaded by the framework.

Then you have to tweak a little bit some CSS as well (I added in my custom CSS for the main viewport). Without this you will NOT see the glyps, I suppose you'll understand why looking at the code bellow:

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

I have also succeeded to do another nice trick: hide action icons by default for all rows and show them only on the hovered row / record.

You can choose where to use this, only on the views that you wwant by using the getClass config function of the icon/glyph by adding x-hidden-display (on older ExtJS version might be x-hide-display) class like this:

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

... and then show all the icons for the hovered / selected row using CSS only:

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

I hope this helps you ;)

Answer 5

Looks like the overrides don't work if you are in 4.0 - 4.1. I went the path of least resistance and just made the icons into png format via http://fa2png.io/ then defined the assigned class to a background-image url in the css.