Font-Awesome ExtJS ActionColumn [英] Font-Awesome ExtJS ActionColumn
问题描述
我在我的应用程序中使用FontAwesome与ExtJS。
当我这样做时，所有其他按钮都与字体真棒工作正常：
iconCls：'fa fa-edit'
例如。
但是当在actioncolumn（允许你在网格上使用pu按钮的组件）使用相同的配置时，图标根本不会出现。
有人知道为什么吗？
EDIT b
$ b
尝试@qdev后：我只是看到了一个？＃f040;
为动作列按钮生成的HTML：
< span data-qtip =Edita registrostyle =font-family：FontAwesomeclass =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％;
}
图标呈现为接受图标（路径）作为选项的 IMG 标签。
为了能够使用这个，你必须重写 Ext.grid.column.Action * defaultRenderer * 方法，以支持glyph配置选项图标（您可以在任何视图上为每个动作选择图标 img 或 glyph 。
这个覆盖的工作（在ExtJS 5.0.1上测试，但我认为它也适用于ExtJS 4）代码：
Ext.define（'MyApp.overrides.grid.column.Action'，{
override：'Ext.grid.column.Action'，
//覆盖实现
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;
//允许配置的渲染器创建初始值（并设置metadata参数中的其他值！）
//在这里分配一个新变量，因为如果我们修改v 它也将修改参数集合，意味着
//我们将一个不正确的值传递给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;
//只处理项目操作设置一次。
if（！item.hasActionConfiguration）{
//将我们记录的默认值应用到所有项目
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 =buttontitle ='+（item.altText || me.altText）+'class ='+ prefix + 'action-col-icon'+ prefix +'action-col-glyph'+ prefix +'action-col-'+ String（i）+'
''+（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 =buttonalt ='+（item.altText || me.altText）+'src ='+ || Ext.BLANK_IMAGE_URL）+
'class ='+ prefix +'action-col-icon'+ prefix +'action-col-'+ String（i）+' '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;颜色：＃9BC8E9; width：20px}
.x-action-col-glyph：hover {color：＃3892D3}
我还成功地做了另一个不错的技巧：默认为所有行隐藏动作图标，并只显示在悬停的行/记录上。
在哪里使用这个，只有通过添加 x-hidden-display 使用图标/ glyph的getClass配置函数，你想知道的视图（在旧的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}
我希望这可以帮助你;）
I'm Using FontAwesome with ExtJS in my app.
All other buttons are working fine with font awesome when I do this:
iconCls: 'fa fa-edit'
For example.
But when using the same configuration in the actioncolumn (Component that allow you to pu buttons on a Grid) the icon simply doesn't appear.
Does anyone have an idea why?
EDIT
After trying @qdev answer: I'm just seeing a ?#f040; text rendered (in blue).
The generated HTML for the action column button:
<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 inspector):
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%;
}
This is because grid action column icons are rendered as IMG tags which accepts icon (path) as option.
In order to be able to use this, you have to override Ext.grid.column.Action *defaultRenderer* method, to support glyph config option beside icon (and on your code you can decide rather you go with icon img or glyph for each action on any view).
The working (tested on ExtJS 5.0.1 but I think it works on ExtJS 4 as well) code for this 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;
}
});
If you don't know where to put or load it, you can find on the internet, but on a sencha cmd generated app you simply put it in appFolder/overrides/grid/column/Action.js and will automatically be loaded by the framework.
Then you have to tweak a little bit some CSS as well (I added in my custom CSS for the main viewport). Without this you will NOT see the glyps, I suppose you'll understand why looking at the code bellow:
.x-action-col-glyph {font-size:16px; line-height:16px; color:#9BC8E9; width:20px}
.x-action-col-glyph:hover{color:#3892D3}
I have also succeeded to do another nice trick: hide action icons by default for all rows and show them only on the hovered row / record.
You can choose where to use this, only on the views that you wwant by using the getClass config function of the icon/glyph by adding x-hidden-display (on older ExtJS version might be x-hide-display) class like this:
{
glyph: 0xf055,
tooltip: 'Add',
getClass: function(){return 'x-hidden-display'}
}
... and then show all the icons for the hovered / selected row using CSS only:
.x-grid-item-over .x-hidden-display, .x-grid-item-selected .x-hidden-display{display:inline-block !important}
I hope this helps you ;)
这篇关于Font-Awesome ExtJS ActionColumn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
