我有一个网格面板,如:
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'
}
});
我正在加载网格后现场活动中的商店。我想根据状态值(忙/闲)在State列中设置图像。它不起作用。
我该怎么做?
答案 0 :(得分:0)
您可以使用渲染器来增加单元格的显示值。
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