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
:Hover Is Not Working Properly in IE9
How to Use CSS Text-Overflow on Text That's Wrapping
Max-Width of Img Inside Flexbox Doesn't Preserve Aspect Ratio
Css: How Could I Deactivate Kerning for My Font
CSS Performance Between Class and Attribute Selectors
Why Does Firefox Render Dashed Borders Misaligned from Each Other
Style Webkit Scrollbar on Certain State
Twitter Bootstrap: Add Media Queries for Xxs Breakpoint
How to Scroll with Ionic and Have Fixed Content Above
Iframe Horizontal Scrolling Not Rendering on iOS
How to Make Diagonal Circle Border Gradient
Color (Colour) Differences Between Browsers