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\'
         


        

Answer 1

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 += '&#' + glyph + ';';
            } else {
                ret += '';
            }
        }
        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 ;)