PDA

View Full Version : Display an image in grid column



coshmos
5 May 2012, 6:41 AM
Hi, everyone.

I made a grid and need to display an image for every record in one of the column.
A grid are made this way:


var grid = Ext.create('Ext.grid.Panel', {
id: 'GridDataFromCreateForm',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 3
}, {
header: 'Category',
dataIndex: 'category',
flex: 5
}, {
header: 'Shelf',
dataIndex: 'shelf',
flex: 2
}, {
header: 'Amount',
dataIndex: 'amount',
flex: 2,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Photo',
dataIndex: 'photo',
flex: 2 {
xtype: 'actioncolumn',
flex: 0.5,
items: [{
icon: this.initialConfig.baseAppUrl + 'Themes/Default/Images/Dictionary_Action_Remove_16x16.png',
tooltip: 'Sell stock',
handler: function (grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
me._beginRemove(rec, store);
}
}]
}], selModel: {
selType: 'cellmodel'
},
title: 'Your fruits',


tbar: [
productSelect,
{
xtype: 'button',
text: 'Add fruit',
handler: addSelectedFruit
}],
plugins: [cellEditing]
});
this.on('beforesubmit', function () {
me.params = {};


var i = 0;
store.each(function (x) {
me.params['createdto.entries[' + i + '].product.id'] = x.get('productId');
me.params['createdto.entries[' + i + '].amount'] = x.get('amount');
i++;
});
});
cellEditing.on('edit', function (x, y, z) {
me.recount(store);
});


return grid;
}


And at the Photo header I need to place a photo, which addreess is represented in dataIndex: 'photo'. Could I make it dynamically? Or before I don't return the grid, I don't have anything in dataIndex: 'photo'?
*I tried render, but nothing was happened.

vietits
5 May 2012, 3:22 PM
Try this:


...
},{
header: 'Photo',
dataIndex: 'photo',
renderer: function(value){
return '<img src="' + value + '" />';
},
...
},{
....

coshmos
9 May 2012, 10:33 PM
Nothing happened and Chrome's JS console shows this error:
Uncaught TypeError: Cannot read property 'dom' of undefined

UPDATE: Done, I've got wrong url. Thanks.

swickram
2 Feb 2016, 5:06 PM
add renderer:

return '<img src="' + value + '" width="150" height="150" borer="0" />';

tiwari227374
22 Oct 2016, 3:35 AM
Hello,

How to get all the modified records of grid in controller which are not submitted?

I am submitting record at row level and also have to submit at Page Level 'Submit All'.

var grid = Ext.define('MyApp.view.MyGrid' ,{
extend : 'Ext.grid.Panel',


requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.form.*',
'Ext.util.*',
'Ext.grid.column.Action'
],


frame: true,


plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, event) {
var val = event.record.get('status');
if (val == 'Open') {
return true;
} else {
return false;
}
}
}
})],

selModel: {
selType: 'cellmodel'
},


tbar: [{xtype: 'tbfill' }, {
text: 'Accept',
scope: this,
itemId: 'Accept'
},
{
text: 'Reject',
scope: this,
itemId: 'Reject'
}],

initComponent: function() {
// paging bar on the Bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: 'MyStore',
inputItemWidth: 35
}),




Ext.apply(this, {

store: 'MyStore',
columns: [{
header: 'Title',
dataIndex: 'title',
width: 50
}, {
header: 'Pages',
dataIndex: 'pages',
width: 130
},{
header: 'Topic',
dataIndex: 'topic',
width: 70,
align: 'right'
}, {
header: 'Status',
dataIndex: 'status',
width: 70,
align: 'right'
},{
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
//renderer : change,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
xtype: 'datecolumn',
width: 130,
format: 'M d, Y',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'actioncolumn',
text: 'C R',
width: 50,
items: [{
icon: 'images/drop-yes.gif',
tooltip: 'Confirm',
scope: this,
getClass : function(value, meta, record, rowIx, ColIx, store) {
// Determines at runtime whether to render the icon/link
if (record.get('status') == 'Pending Me' || record.get('status') == 'Open') {
return 'x-grid-center-icon'; //Show the action icon
} else {
return 'x-hidden-display'; //Hide the action icon
}
}
}, {
icon: 'images/drop-no.gif',
tooltip: 'Reject',
scope: this,
getClass : function(value, meta, record, rowIx, ColIx, store) {
// Determines at runtime whether to render the icon/link
if (record.get('status') == 'Pending Me') {
return 'x-grid-center-icon'; //Show the action icon
} else {
return 'x-hidden-display'; //Hide the action icon
}
}
}]
}]
});


this.callParent();
}
});