Font-Awesome ExtJS ActionColumn

Question

Utilizzo FontAwesome con ExtJS nella mia app.

Tutti gli altri pulsanti stanno lavorando bene con carattere impressionante quando faccio questo:

iconCls: 'fa fa-edit' 

per esempio.

Ma quando si utilizza la stessa configurazione nella colonna di azioni (Componente che consente di creare pulsanti su una griglia) l'icona semplicemente non viene visualizzata.

Qualcuno ha un'idea del perché?

EDIT

Dopo aver provato risposta @qdev: sto solo vedendo un # F040;? testo reso (in blu).

Il codice HTML generato per il pulsante colonna Azione:

<span data-qtip="Edita registro" style="font-family:FontAwesome" class="x-action-col-icon x-action-col-glyph x-action-col-2 " title="" role="button">�xf040;</span> 

CSS (Tratto da ispettore firebuh):

element.style { 
    font-family: FontAwesome; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 
.x-action-col-icon { 
    cursor: pointer; 
    height: 16px; 
    width: 16px; 
} 
.x-border-box, .x-border-box * { 
    box-sizing: border-box; 
} 
.x-action-col-glyph { 
    color: #9bc8e9; 
    font-size: 16px; 
    line-height: 16px; 
    width: 20px; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 
element.style { 
    text-align: center; 
} 
.x-grid-cell-inner-action-col { 
    font-size: 0; 
    line-height: 0; 
} 
.x-grid-cell-inner { 
    white-space: nowrap; 
} 
.x-grid-cell { 
    font: 11px/13px tahoma,arial,verdana,sans-serif; 
} 
.x-unselectable { 
    cursor: default; 
} 
.x-grid-table { 
    border-collapse: separate; 
} 
.x-unselectable { 
    cursor: default; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-panel-body-default { 
    color: black; 
    font-size: 12px; 
} 
.x-body { 
    color: black; 
    font-family: tahoma,arial,verdana,sans-serif; 
    font-size: 12px; 
} 
body { 
    color: #222222; 
    cursor: default; 
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 150%; 
} 
html, body { 
    font-size: 100%; 
} 
html, body { 
    font-size: 100%; 
} 

Answer 1

Questo perché le icone delle colonne azione griglia sono resi come IMG tag che accetta icona (percorso) come opzione.

Al fine di essere in grado di utilizzare questo, è necessario eseguire l'override Ext.grid.column.Action*defaultRenderer* metodo, per supportare l'opzione glifo di configurazione accanto all'icona (e il vostro codice si può decidere, piuttosto si va con l'icona img o glyph per ogni azione in ogni caso).

La lavorazione (testato su ExtJS 5.0.1 ma penso che funziona su ExtJS 4 così) il codice per questo di 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;  
    } 
}); 

Se non sai dove mettere o caricarlo, è può trovarlo su internet, ma su un'app generata da sencha cmd lo si inserisce semplicemente in appFolder/overrides/grid/column/Action.js e verrà automaticamente caricato dal framework.

Quindi devi modificare anche un po 'di CSS (ho aggiunto nel mio CSS personalizzato per la finestra principale). Senza questo non sarà possibile visualizzare i glyps, suppongo capirete perché guardando il codice sotto:

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

ho anche riuscito a fare un altro bel trucco: nascondere le icone di azione per impostazione predefinita per tutte le righe e spettacolo li solo sulla riga/record librati.

È possibile scegliere dove utilizzare questo, solo il punto di vista che si wwant utilizzando la funzione di configurazione getClass dell'icona/glifo con l'aggiunta di x-hidden-display (sulla versione precedente ExtJS potrebbe essere x-hide-display) classe come questa:

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

...e poi mostrare tutte le icone per il passato il mouse/riga selezionata utilizzando solo i CSS:

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

Spero che questo ti aiuta;)

Answer 2

Recentemente ho creato questa nuova applicazione che vi aiuterà a preparare le icone personalizzate che è possibile assegnare a iconCls. Genera il file _icons.scss per le tue app Sencha. L'ho provato solo con Sencha Touch, ma penso che dovrebbe funzionare anche con ExtJS. Il README illustra i passaggi per la creazione di icone sul sito Web di Ico Moon e l'utilizzo dello strumento per convertire i file di progetto di Ico Moon in SCSS da utilizzare in Sencha. È stato anche testato con i progetti Sencha Architect Touch.

• https://github.com/tohagan/sencha-ico-moon

Se lo si utilizza per ExtJS prego di dirmi se funziona. Grazie.

Answer 3

aggiungo getGlyph (simile a getClass per le icone) a qdev soluzione. È una soluzione molto semplice ma funziona perfettamente.

IS è a soli 3 linee aggiungono fare qdev soluzione:

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

completo di codice le sostituzioni:

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

È possibile utilizzare il più semplice:

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

Spero che questo ti aiuta;)

Answer 4

Sembra che le sostituzioni non funzionino se ci si trova in 4.0 - 4.1. Ho seguito il percorso di minor resistenza e ho appena realizzato le icone in formato png tramite http://fa2png.io/, quindi ho definito la classe assegnata a un URL di background-image nel css.

Answer 5

Si può semplicemente tornare 'fa fa-edit' classe da getClass dell'elemento actioncolumn come segue:

{ 
    xtype: 'actioncolumn', 
    items: [{ 
     getClass: function() { 
      return 'x-fa fa-users'; 
     } 
    }] 
}