Niesamowita czcionka ExtJS ActionColumn

Question

Używam FontAwesome z ExtJS w mojej aplikacji.

Wszystkie pozostałe przyciski działają dobrze z czcionką niesamowite, kiedy to zrobić:

iconCls: 'fa fa-edit' 

Na przykład.

Ale gdy używasz tej samej konfiguracji w kolumnie akcji (Element, który pozwala ci pu przycisków na Siatkę) ikona po prostu się nie pojawia.

Czy ktoś ma pomysł, dlaczego?

EDIT

Po wypróbowaniu @qdev odpowiedź: Ja tylko widząC# f040;? tekst renderowany (na niebiesko).

Wygenerowany HTML dla przycisku kolumnie Działanie:

<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 (Taken from firebuh inspektora):

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

To dlatego ikony kolumnie Działanie siatki są renderowane jako IMG tagów który akceptuje ikonę (ścieżka) jako opcja.

Aby móc korzystać z tego, trzeba zastąpić Ext.grid.column.Action*defaultRenderer* sposób, aby wspierać opcję glif config obok ikony (i na kodzie można zdecydować raczej udać się z ikoną img lub glyph dla każdego działania na dowolnym widoku).

Działanie (testowane na ExtJS 5.0.1, ale myślę, że to działa na ExtJS 4 a) do tego kodu: 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;  
    } 
}); 

Jeśli nie wiesz gdzie umieścić lub załadować go, ty można znaleźć w Internecie, ale w aplikacji generowanej przez Sencha cmd po prostu umieścisz ją w appFolder/overrides/grid/column/Action.js i zostanie ona automatycznie załadowana przez framework.

Następnie musisz trochę poprawić niektóre CSS (dodałem w moim niestandardowym CSS dla głównej rzutni). Bez tego nie będzie widać glyps, przypuszczam, zrozumiesz dlaczego patrząc na kod poniżej:

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

Mam również udało się zrobić kolejny piękny trik: ikony ukryj działania domyślnie dla wszystkich wierszy i koncert tylko w ukrytym rzędzie/zapisie.

Można wybrać gdzie się to wykorzystać, tylko od poglądów, które wwant za pomocą funkcji config getClass ikony/glifów dodając x-hidden-display (na starszej wersji ExtJS może być x-hide-display) klasa tak:

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

...a następnie pokazać wszystkie ikony tylko unosił/wybrany wiersz z użyciem CSS:

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

Mam nadzieję, że to pomaga;)

Answer 2

I niedawno stworzył tę nową aplikację, która pomoże Ci przygotować niestandardowe ikony można przypisać do iconCls. Generuje plik _icons.scss dla aplikacji Sencha. Testowałem go tylko z Sencha Touch, ale myślę, że powinien również działać z ExtJS. README wyjaśnia kroki tworzenia ikon na stronie internetowej Ico Moon i używa narzędzia do konwersji plików projektu Ico Moon do SCSS do użytku w Sencha. Został również przetestowany w ramach projektów Sencha Architect Touch.

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

Jeśli używamy go do ExtJS proszę mi powiedzieć, czy to działa. Dzięki.

Answer 3

dodam getGlyph (podobną do metody getClass ikon) do qdev rozwiązania. To bardzo proste rozwiązanie, ale działa idealnie.

Czy jest zaledwie 3 linie dodać zrobienia qdev rozwiązanie:

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

Kompletny kod przesłania:

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

Można używać go jako proste:

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

Mam nadzieję, że pomaga;)

Answer 4

Wygląda na to, że zastąpienia nie działają, jeśli jesteś w wersji 4.0 - 4.1. Poszedłem na ścieżkę najmniejszego oporu i właśnie zrobiłem ikony w formacie png poprzez http://fa2png.io/, a następnie zdefiniowałem przypisaną klasę do adresu URL obrazu tła w css.

Answer 5

można po prostu wrócić 'fa fa-Edit' klasę z metody getClass elementu actioncolumn jako następujące:

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