英文:
How to render a font awesome icon when comparing from a value - Ext JS
问题
我有一个网格,在网格线上,我想根据条件呈现一个很棒的字体图标。
text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
if(value === 1){
return 'x-fa fa-arrow-circle-up';
}else if(value === 3){
return 'x-fa fa-arrow-circle-down';
}
}
英文:
I have a Grid, and on the grid line I want to render an awesome font icon depending on a condition.
text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
if(value === 1){
return 'x-fa fa-arrow-circle-up';
}else if(value === 3){
return 'x-fa fa-arrow-circle-down';
}
}
.
答案1
得分: 0
根据文档,你需要从 renderer
函数返回以下内容:
<span class="x-fa fa-arrow-circle-up"></span>
如果需要自定义样式,你也可以添加它:
<span style="width:24px;color:red;" class="x-fa fa-arrow-circle-up"></span>
英文:
According to the documentation, you need to return from the renderer
function:
>The HTML string to be rendered.
Since FontAwesome icons are referred in Ext JS with CSS styles, you can do the following:
return '<span class="x-fa fa-arrow-circle-up"></span>';
If you need some custom styling you can add it as well:
return '<span style="width:24px;color:red;" class="x-fa fa-arrow-circle-up"></span>';
答案2
得分: 0
我找到了解决方法
text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
cell.setTools({
name: {
iconCls: value === 1 ? 'x-fa fa-arrow-circle-up' : 'x-fa fa-arrow-circle-down',
}
});
},
英文:
I found a way to solve
text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
cell.setTools({
name: {
iconCls: value === 1 ? 'x-fa fa-arrow-circle-up' : 'x-fa fa-arrow-circle-down',
}
});
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论