如何根据列渲染器中的值在网格列中显示图像?
Posted
技术标签:
【中文标题】如何根据列渲染器中的值在网格列中显示图像?【英文标题】:How to display image in column of grid based on value in column's renderer? 【发布时间】:2015-03-03 08:07:50 【问题描述】:我有一个像这样的网格面板:
Ext.define('Demo.view.main.content.source.Ex',
extend: 'Ext.grid.Panel',
requires: [
'Demo.store.main.content.source.Ex',
'Demo.view.main.content.source.ExController',
],
xtype: 'app-main-content-ex',
title: 'Example',
store: 'Demo.store.main.content.source.Ex',
controller:'main-content-source-ex',
//multiSelect: false,
columnLines: true,
initComponent: function()
var store = Ext.create('Demo.store.main.content.source.Ex',
storeId: 'app-main-content-source-exstore'
);
Ext.apply(this,
store: store
);
this.columns= [
text : 'Driver Name',
flex : 3,
sortable : false,
dataIndex: 'name'
,
xtype: 'gridcolumn',
getEditor: function(record)
console.log(record.get('state'));
var value;
if (record.get('state') == 'free')
value = 'xf09c@FontAwesome'
else
value = 'xf023@FontAwesome'
return Ext.create('Ext.grid.CellEditor',
field:
xtype: 'image',
glyph: value
);
,
text : 'State',
flex : 1,
dataIndex: 'state'
]
this.callParent();
,
listeners:
afterRender: 'setUpInfo'
);
我正在网格 afterrender 事件中加载该存储。我想根据状态(空闲/忙碌)的值在状态列中设置图像。它不工作。
我该怎么做?
【问题讨论】:
你能在 fiddle.sencha.com 上做一个最小可行的演示吗? 你可以检查这个:link 这里的值设置在状态列我希望图像是基于值的。 【参考方案1】:您可以使用渲染器来增加单元格的显示值。
columns: [
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Driver Name',
flex: 1,
editor:
xtype: 'textfield'
,
xtype: 'gridcolumn',
renderer: function(value)
if (value == 'free')
return 'xf09c@FontAwesome'
else
return 'xf023@FontAwesome'
,
getEditor: function(record)
var value;
if (record.get('state') == 'free')
value = 'xf09c@FontAwesome'
else
value = 'xf023@FontAwesome'
return Ext.create('Ext.grid.CellEditor',
field:
xtype: 'image',
glyph: value
);
,
text: 'State',
flex: 1,
dataIndex: 'state'
]
文档:-http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.grid.column.Column-cfg-renderer
【讨论】:
在渲染器中我应该如何传递图像(带有字形的图像),以便将其显示在列中。返回 'xf023@FontAwesome' 显示文本而不是图像。 传入 html 而不是 Ext.Image,因为您将获得更好的性能。或者看看这个***.com/a/11473354/1672632 我可以传递html格式的图片。但我想使用字形。 好的 - 然后看看我发给你的上一个链接,或者看看如何在 HTML 中实现字形。以上是关于如何根据列渲染器中的值在网格列中显示图像?的主要内容,如果未能解决你的问题,请参考以下文章
有没有办法在 ag 网格中的 2 个单元格渲染器之间传递数据?