Font-Awesome ExtJS ActionColumn

我在我的应用程序中使用FontAwesome和ExtJS。Font-Awesome ExtJS ActionColumn

iconCls: 'fa fa-edit'

例如：当我这样做

其他所有按钮都工作正常使用字体真棒。

但是，当在actioncolumn中使用相同的配置（允许您在网格上按下按钮的组件）时，图标不会出现。

有没有人有一个想法，为什么？

编辑

试图@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%; 
}

来源

2014-08-29 lcguida

这是因为网格操作列图标被呈现为IMG标签，其接受图标（路径）作为选项。

为了能够利用这一点，你必须重写Ext.grid.column.Action方法，支持图标的旁边字形配置选项（和你的代码，你可以决定，而你用图标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}

我还成功做另一个好的技巧：隐藏操作图标默认情况下，所有行和表演他们只在悬停的行/记录上。

您可以选择在哪里使用，只在你使用的图标/字形的getClass配置功能，通过增加x-hidden-display wwant的意见（在旧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}

我希望这可以帮助你;）

来源

2014-09-13 09:00:16 qdev

我在休息一天。星期一我会研究这个，并且给你一些反馈。谢谢。 – lcguida 2014-09-13 23:03:09

好的，星期一过去了，你有机会测试它吗？我很好奇;） – qdev 2014-09-17 08:17:46

对不起。今天只能测试这个。我没有得到图标，但是？x0f40;文字代替。我可以看到它使用FontAwesome，因为它是字体。但不能渲染图标。（Se我更新的问题） – lcguida 2014-09-17 16:53:16

我最近创造了这个新的应用程序，这将帮助你准备自定义图标你可以分配到iconCls。它会为Sencha应用程序生成_icons.scss文件。我已经使用Sencha Touch进行了测试，但我认为它也可以与ExtJS一起使用。自述文件解释了在Ico Moon网站上创建图标的步骤，并使用该工具将Ico Moon项目文件转换为SCSS以便在Sencha中使用。它也经过了Sencha Architect Touch项目的测试。

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

如果你使用它的ExtJS的，请告诉我，如果它的工作原理。谢谢。

来源

2014-09-25 05:20:32

我添加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 '[email protected]'; 
     } else { 
      return '[email protected]'; 
     } 
    },

我希望这帮助你;）

来源

2015-01-07 10:38:51

看起来，如果你在4.0-4.1中，覆盖不起作用。我走了阻力最小的路径，并通过http://fa2png.io/将图标转换为png格式，然后将分配的类定义为css中的背景图像url。

来源

2015-02-27 16:18:11 bnw

您可以简单地返回从actioncolumn项的getClass“发发编辑”类如下：

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

来源

2017-04-24 07:35:31 fen1ksss

Font-Awesome ExtJS ActionColumn

回答

相关问题