View Full Version : [CLOSED-585] Column renderer is firing twice

17 Feb 2010, 3:00 AM
I have an application where I use different colors on cells depending on their values. The column renderer I have written for this use case is being fired twice by the framework. I have simplified my case into a test case which is below.

Steps to repeat: Just put a row index into the text box and you will see in the logs that renderer is being fired twice when updating the record for that index. Strangely If you update the row but don't change any value it will only fires once.

My platform: Windows Vista & FF 3.5.7; also tested and saw it is happening on IE8. Tried on ext 3.1.0 and 3.1.1


<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Test Case --> Custom column renderer fires twice</title>

<!-- ExtJs CSS -->
<link rel="stylesheet" type="text/css" href="/Content/ext/resources/css/ext-all.css" />

<!-- ExtJs Scripts -->
<script type="text/javascript" src="/Content/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Content/ext/ext-all-debug.js"></script>

<!-- Test Case Script -->
<script type="text/javascript" src="ColumnRendererFiringTwice.js"></script>

<div id="grid" style="margin-top:10px; margin-left:10px"></div>
<div id="updateButton" style="margin-top:10px; margin-left:10px; width: 160px"></div>
<div id="insertButton" style="margin-top:10px; margin-left:10px"></div>

<script type="text/javascript" language="javascript">
Ext.onReady(function() {

var customRenderer = function(value, metadata, record, rowIndex, columnIndex, dataStore) {
console.log(String.format("Renderer is running for cell[{0},{1}]", rowIndex, columnIndex));
return value;

var data = [];

for(var i=1; i<10; i++)
data.push([i, 'Name ' + i, 'Type ' + i, 'Description ' + i]);

function runTest() {
var store = new Ext.data.ArrayStore({
idIndex: 0,
fields: [
{ name: 'Id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'description', type: 'string' }
data : data,
sortInfo: { field: 'name', direction: 'ASC' }

this.grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'Id', width: 20, sortable: false, dataIndex: 'Id' },
{ header: 'Name', width: 100, sortable: true, dataIndex: 'name', renderer: customRenderer },
{ header: 'Type', width: 80, sortable: true, dataIndex: 'type'},
{ header: 'Description', width: 150, sortable: false, dataIndex: 'description', align: 'left' }
stripeRows: true,
view: new Ext.grid.GridView({
autoFill: true,
forceFit: true,
stateful: false,
scrollOffset: -15
disableSelection: false,
trackMouseOver: true,
autoHeight: true,
stateful: false,
width: 350,
renderTo: 'grid',
stateful: false

new Ext.Button({
listeners: {
click: function() {
if (Ext.isEmpty(rowIndex.getValue())) {
alert("Enter a row index to specify which record to update");

var index = rowIndex.getValue();
var record = store.getById(index);

record.set('name', record.data.name + '-Updated');


console.log(String.format("{0}. record has been updated", index));
text: 'Update Row',
renderTo: 'updateButton',
style: 'display:inline',
width: 80

var rowIndex = new Ext.form.NumberField({
parent: this,
name: 'Row Number',
style: "margin-left:10px; float:right",
renderTo: 'updateButton',
width: 40

new Ext.Button({
listeners: {
click: function() {
var RecordType = store.recordType;
var nextRecordIndex = store.getCount() + 1;

var newRecord = new RecordType({ Id: nextRecordIndex }, nextRecordIndex);
newRecord.data.name = 'Name' + nextRecordIndex;
newRecord.data.type = 'Type' + nextRecordIndex;
newRecord.data.description = 'Description' + nextRecordIndex;


console.log(String.format("A new record has been added"));
text: 'Add a new record',
renderTo: 'insertButton',
width: 80


17 Feb 2010, 5:08 PM
As discussed in the support ticket, this isn't a bug. You're calling both endEdit and commit, which will fire update events on the store.

You should call only commit, in this case.