This is because the grid table column icons are displayed as IMG tags that take a parameter (path) as an option.
To use this, you must override the Ext.grid.column.Action *defaultRenderer* method to support the glyph configuration option next to the icon (and in your code you can decide that you go with the IMG or glyph for each action in any view )
Work (tested on ExtJS 5.0.1, but I think it works with ExtJS 4 as well) 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 it or download it, you can find it on the Internet, but in the sencha application created by cmd, you just put it in appFolder/overrides/grid/column/Action.js and load the framework automatically.
Then you need to adjust some CSS a bit (I added to my custom CSS for the main viewport). Without this, you will not see glyphs, I suppose you will understand why you look at the code below:
.x-action-col-glyph {font-size:16px; line-height:16px; color:#9BC8E9; width:20px} .x-action-col-glyph:hover{color:#3892D3}
I also managed to do another good trick: hide the default action icons for all lines and show them only on line / record hang.
You can choose where to use it only on the views that you want to use using the getClass icon / glyph configuration function by adding x-hidden-display (for an older version of ExtJS it might be x-hide-display ) with the following class:
{ glyph: 0xf055, tooltip: 'Add', getClass: function(){return 'x-hidden-display'} }
... and then show all the icons for the hover / selected row using only CSS:
.x-grid-item-over .x-hidden-display, .x-grid-item-selected .x-hidden-display{display:inline-block !important}
Hope this helps you;)