Font-Awesome ExtJS ActionColumn

C'est parce que la grille de colonne action icônes sont rendus comme IMG balises qui accepte icône (chemin) en option.

Afin de pouvoir utiliser cette fonction, vous devez remplacer les Ext.grid.column.Action *defaultRenderer* méthode, à l'appui de glyphe option de configuration à côté de l'icône (et sur votre code, vous pouvez décider que vous allez à l'icône img ou glyph pour chaque action sur tout point de vue).

Travail (testé sur ExtJS 5.0.1 mais je pense qu'il travaille sur ExtJS 4) code de cette substitution:

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

Si vous ne savez pas où placer ou de le charger, vous pouvez trouver sur internet, mais sur un sencha cmd généré application que vous mettez simplement dans appFolder/overrides/grid/column/Action.js et sera automatiquement chargé par le cadre.

Alors vous devez l'ajuster un peu un peu de CSS (j'ai ajouté dans mon CSS personnalisé pour la vue principale).
Sans cela, vous ne verrez PAS le glyps, je suppose que vous comprendrez pourquoi en regardant le code ci-dessous:

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

J'ai aussi réussi à faire un autre tour de nice: masquer les icônes d'action par défaut pour toutes les lignes et de leur montrer que sur le planait ligne /enregistrement.

Vous pouvez choisir l'endroit où l'utilisation de ce, uniquement sur les points de vue que vous wwant à l'aide de la getClass config de la fonction de l'icône/glyphe en ajoutant x-hidden-display (sur les anciens ExtJS version peut être x-hide-display) de la classe comme ceci:

{
glyph: 0xf055,
tooltip: 'Add',
getClass: function(){return 'x-hidden-display'}
}

... et puis afficher toutes les icônes pour le plané /ligne sélectionnée à l'aide de CSS:

.x-grid-item-over .x-hidden-display, .x-grid-item-selected .x-hidden-display{display:inline-block !important}

J'espère que cela vous aide à vous 😉

OriginalL'auteur qdev

- Je ajouter getGlyph (similaire à getClass pour les icônes) à qdev solution.
C'est une solution très simple mais fonctionne parfaitement.

Est juste 3 lignes ajouter ne qdev solution:

    if(Ext.isFunction(item.getGlyph)){
glyph = item.getGlyph.apply(item.scope || scope, arguments);
}else{
glyph = item.glyph;
}

Complète remplace le code:

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

Vous pouvez l'utiliser aussi simple que:

    getGlyph: function(v, meta, rec) {
if (rec.get('access')) {
return 'xf067@FontAwesome';
} else {
return 'xf068@FontAwesome';
}
}, 

J'espère que cela vous aide à vous 😉

OriginalL'auteur proffnet.com

Ressemble les remplacements ne fonctionnent pas si vous êtes en 4.0 - 4.1. Je suis allé le chemin de moindre résistance et vient de faire les icônes en format png via http://fa2png.io/ alors défini la classe assignée à un arrière-plan-url de l'image dans le css.

OriginalL'auteur bnw