Шрифт-Удивительный ExtJS ActionColumn

я добавляю 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';
        }
    }, 

надеюсь, это вам поможет;)

вы можете просто вернуть класс "fa fa-edit" из getClass элемента actioncolumn следующим образом:

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

недавно я создал это новое приложение, которое поможет вам подготовить пользовательские значки, которые вы можете назначить iconCls. Он генерирует _icons.scss файл для ваших приложений Sencha. Я тестировал его только с Sencha Touch, но я думаю, что он также должен работать с ExtJS. README объясняет шаги по созданию значков на веб-сайте ICO Moon и использованию инструмента для преобразования файлов проекта ICO Moon в SCSS для использования в Sencha. Он также был протестирован с проектами Sencha Architect Touch.

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

Если вы используете его для ExtJS, пожалуйста, сообщите мне, если он работает. Спасибо.

похоже, команда не работает, если вы находитесь в 4.0 - 4.1. Я пошел по пути наименьшего сопротивления и просто сделал значки в формате png через http://fa2png.io/ затем определил назначенный класс url фонового изображения в css.