PDA

View Full Version : Refresh RowNumberer after store.insert() ?



jimmifett
30 Aug 2012, 9:58 AM
After a store.insert(0, record), I end up like this:

1 data1 data2
1 data1 data2
2 data1 data2
3 data1 data2
4 data1 data2
etc.

How can I get the rownumberer to reset after the insert?

Zdeno
30 Aug 2012, 11:10 AM
Try call
grid.getView().refresh(); after insert.

jimmifett
30 Aug 2012, 12:07 PM
First thing I tried :)

Have done after insert call, inside an add listener on the store, and manually refreshing from console.

scottmartin
30 Aug 2012, 2:09 PM
If you look at how it works, you will see that RowNumberer :: renderer uses
record.indexOfTotal(Record)

When you insert the record, there is no record.index value, .. so it returns 0 twice, hence you see 1, 1, 2, 3, 4.

You could override record.indexOfTotal() to fix thjis.



Ext.override(Ext.grid.RowNumberer, {

renderer: function(value, metaData, record, rowIdx, colIdx, store) {
var rowspan = this.rowspan;
if (rowspan){
metaData.tdAttr = 'rowspan="' + rowspan + '"';
}

metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';

console.log(store.indexOfTotal(record));
console.log(store.getTotalCount());
console.log(store.data.items.length);
console.log(record);
console.log('**');

return store.indexOfTotal(record) + 1;
}
});

var store = Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ xtype: 'rownumberer' },
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
],
height : 200,
width : 400,
renderTo : Ext.getBody()
});

myrec = { name: 'new name'};
store.insert(0,myrec);
console.log('-----------------------');
console.log(store.data.items.length);


Scott.

jimmifett
31 Aug 2012, 12:47 PM
Thanks Scott!
That helped point me in the right direction!

I add:


if(record.phantom)
{ return '*'; }

before the regular return in the override.

benjamineberle
29 Jan 2013, 9:08 PM
Scott,
Can we expect that the renderer's store.indexOfTotal() gets replaced with store.indexOf() sometimes soon?
Rownumberer is anyway not a key, so I guess this would be the more natural behaviour.
Just trying to avoid overrides for later maintenance...
Thanks

caballero
14 Jul 2013, 12:40 PM
I can't get the solution here to work.
I've set up a jsfiddle here for a test.
http://jsfiddle.net/mkASb/

Is there a solution for updating the rownumberer column after a insert or delete??

benjamineberle
14 Jul 2013, 6:34 PM
Note that the RowNumberer has changed with the latest releases of Ext.js, so grab the latest code and debug it.
This line should work if the current implementation does not do the same:

return store.indexOf(record) + 1;

caballero
14 Jul 2013, 10:03 PM
Note that the RowNumberer has changed with the latest releases of Ext.js, so grab the latest code and debug it.
This line should work if the current implementation does not do the same:

return store.indexOf(record) + 1;

Hey Ben,

Thanks for the reply.
I've updated the jsfiddle example here
http://jsfiddle.net/mkASb/3/

As you'll see, this works.
BUT it will not work with paging.
All pages start with #1.

Anyone have any other thoughts?

benjamineberle
14 Jul 2013, 10:14 PM
In that case you have to get the total index over all unfiltered records. If indexOfTotal() doesn't work, take a look at the store object. It has a data object, which holds the filtered (paged) records. It also has a snapshot object, which holds the original data (unfiltered). It's a mixed collection, so you can get the total index via

store.snapshot.indexOf(record)

There is a solution, just use Firebug or Chrome Dev Tools.Also make sure the latest release of Ext.js does not already what you want.