Icomoon glyph on group grid Extjs action column not working? -
i have issue on showing icomoon glyph on grid action columns using sencha architect in extjs 5.0 application. using group grid here. glyphs showing nicely on ext button btw.
i have made overwrite class ext.grid.column.action shown in following link
ext.define('myapp.override.grid.column.action', { override: 'ext.grid.column.action', // overridden 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, = 0, item, ret, disabled, tooltip,glyph, glyphparts, glyphfontfamily; // allow configured renderer create initial value (and set other values in "metadata" argument!) // assign new variable here, since if modify "v" modify arguments collection, meaning // pass incorrect value getclass/gettip ret = ext.isfunction(me.origrenderer) ? me.origrenderer.apply(scope, arguments) || '' : ''; cellvalues.tdcls += ' ' + ext.basecssprefix + 'action-col-cell'; (; < 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; } // process item action setup once. if (!item.hasactionconfiguration) { // apply our documented default 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; } }); and applied getglyph function like:
getglyph: function(v, meta, rec) { return 'xe600@icomoon'; } but still not showing icon or glyp @ column.
i found following output override class as
<span role="button" title="" class="x-action-col-icon x-action-col-glyph x-action-col-0 xe600@icomoon" style="font-family:icomoon"></span> which seems fine me. not sure wrong here, can 1 me?
its bad not check in link mentioned in question:
i have add css line in css file showing glyphs in action columns:
.x-action-col-glyph {font-size:16px; line-height:16px; color:#9bc8e9; width:20px} after glyphs shown.
Comments
Post a Comment