Font-Awesome ExtJS ActionColumn

Question

Я использую FontAwesome с ExtJS в своем приложении.

Все остальные кнопки работают отлично с купелью удивительной, когда я делаю это:

iconCls: 'fa fa-edit' 

Например.

Но при использовании той же конфигурации в столбце action (компонент, который позволяет вам пуговицы на сетке) значок просто не отображается.

У кого-нибудь есть идея, почему?

EDIT

После попытки @qdev ответ: Я просто видеть # F040;? текст отображается (синим цветом).

Сгенерированный HTML для кнопки колонка Действия:

<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 (Взят из 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

Это происходит потому, что значки колонки действия сетки отображается в виде IMG тегов, которые принимают значок (путь) в качестве опции.

Для того, чтобы иметь возможность использовать это, вы должны переопределить Ext.grid.column.Action*defaultRenderer* метод, чтобы поддержать вариант глифа конфигурации рядом с иконкой (и на своем коде вы можете решить, а вы идете с иконкой img или glyph для каждого действия на любом виде).

Рабочим (проверено на ExtJS 5.0.1, но я думаю, что он работает на ExtJS 4, а) код для этой замены:

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

Если вы не знаете, куда поставить или загрузить его, вы можно найти в Интернете, но в приложении sencha, создаваемом cmd, вы просто помещаете его в appFolder/overrides/grid/column/Action.js и автоматически загружаете фреймворк.

Затем вам нужно немного подкорректировать некоторый CSS (я добавил в свой пользовательский CSS для основного окна просмотра). Без этого вы не увидите glyps, я полагаю, вы поймете, почему, глядя на код ниже:

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

Я также удалось сделать еще один хороший трюк: значки скрыть действия по умолчанию для всех строк и шоу их только на зависании строки/записи.

Вы можете выбрать где использовать это, только на мнении, что вы wwant с помощью функции конфигурации GetClass из значка/глифа, добавив x-hidden-display (на старой версии ExtJS может быть x-hide-display) класс как это:

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

...а затем показать все иконки для парило/выбранную строку с помощью CSS только:

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

Я надеюсь, что это помогает;)

Answer 2

Я недавно создал это новое приложение, которое поможет вам подготовить пользовательские иконки что вы можете назначить iconCls. Он создает файл _icons.scss для ваших приложений Sencha. Я тестировал его только с Sencha Touch, но я думаю, что он также должен работать с ExtJS. README объясняет шаги по созданию значков на веб-сайте Ico Moon и с помощью инструмента для преобразования файлов проекта Ico Moon в SCSS для использования в Sencha. Он также был протестирован с проектами Sencha Architect Touch.

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

Если вы используете его для ExtJS, пожалуйста, скажите мне, если это работает. Благодарю.

Answer 3

добавить getGlyph (похожий на GetClass для иконок) до qdev раствора. Это очень простое решение, но отлично работает.

Является ли это всего 3 строки добавляют сделать qdev решение:

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

Полный переопределяет код:

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

Вы можете использовать его как просто как:

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

Я надеюсь, что это помогает вам;)

Answer 4

Похоже, что переопределения не работают, если вы в 4.0 - 4.1. Я пошел по пути наименьшего сопротивления и просто сделал значки в формате png через http://fa2png.io/, а затем определил назначенный класс на URL-адрес фонового изображения в css.

Answer 5

Вы можете просто вернуть «фа фа-редактирования» класс от GetClass в actioncolumn элемента следующим образом:

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