Font-Awesome Extjs Actioncolumn

Font-Awesome ExtJS ActionColumn

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

How to use font awesome in an Ext.panel.Tool

You are not adding content to the :before pseudo element, which is required to have the content displayed. You could use the following CSS:

.component-tool-export .x-tool-export{
background-image:none !important;
font: 16px/1 FontAwesome;
}
.component-tool-export .x-tool-export:before{
content: "\f1c3" !important;
}

But if you already use Sencha CMD, I would recommend to conform with Sencha's own SASS files and make use of the full feature set of Sencha Fashion:

$tool-export-glyph: dynamic($fa-var-file-excel-o $tool-glyph-font-size $font-icon-font-family);

.#{$prefix}tool-export {
@include font-icon($tool-export-glyph);
background: none;
}

How to change the colour of an Icon from FontAwesome

If you want to change all icons, do as EvanTrimboli suggests. In SCSS, add

$menu-glyph-color: dynamic(#008000);

If you want to change only certain icons, you should make a special class for that:

iconCls: 'x-fa fa-briefcase greenIcon',

and then add the new color to the CSS:

.greenIcon {
color: green;
}

Icomoon glyph on group grid Extjs action column not working?

Its my bad I could not check in the link i mentioned in my question:

I have to add the css line in my css file for showing the glyphs in action columns:

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

After this glyphs are shown.



Related Topics



Leave a reply



Submit