View Full Version : Adding new record to store after using store.removeAll generates error

28 Jun 2012, 10:47 AM
I've found that using the store.removeAll and then attempting to add a new record to the store generates an error "Unable to get value of the property 'viewIndex'". The new record is added to the grid despite the error. The error does not occur on subsequent records being added to the store just the first one. The error gets generated whether I use store.insert or store.add.

My current workaround is to get all records in the store and then pass them to the store's remove method. This produces the results I expected out of store.removeAll but doesn't generate the error.

var recs = store.getRange();

Am I misinterpreting how the store.removeAll method is supposed to be used or is there a legitimate bug in this case?

I'm using:
Ext JS 4.1
Build date: 2012-04-20 14:10:47 (19f55ab932145a3443b228045fa80950dfeaf9cc)

I've attached a sample page to demo the process.

I appreciate your time and attention,


28 Jun 2012, 12:02 PM
The following works as expected:

var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'change'],
{ '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'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
tbar: [{
text: 'Remove All',
handler: function(){
text: 'Add New',
handler: function(){
var record = [{name: 'Sencha', email: 'support@sencha.com', change: 100}];
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change'}
height: 200,
width: 400,
renderTo: Ext.getBody()


29 Jun 2012, 4:59 AM
I appreciate your response. The sample code I had provided actually was a cell editing grid. I did try your code and as you say it does work as expected. The cell editing grid, however, does not. I didn't think to mention the cell editing in my original post because I thought someone would try the code I provided and see the components being used. Sorry, my fault on that.

I did, however use your example and modify it to determine what the difference was. I believe I've narrowed the issue down to the process of editing a cell. Using your example I extended the code to include cell editing for the "name" column.

This is the process I find that reproduces the issue each time:

After the page loads click the "Remove All" button to remove all records.
Click the "Add New" button to add a new record.
Edit the record by clicking in the "Name" column and change the value.
Click the "Remove All" button to remove all records.
Click the "Add New" button to add a new record. The error appears regarding "viewIndex" property. Again this only happens on the first record.

You can repeat the steps above but do not change the record after it is added. Removing all records and then adding new records without editing does not cause the error to occur. Editing the record sets something up that causes the error to show.

Originally I thought maybe I needed to commit the changes to the store before removing all records but that did not help in my original situation.

Fortunately I do have the work around originally mentioned. It just seems like this very well may be a bug.

I appreciate the time and attention to this topic.


30 Jun 2012, 2:45 PM
I will discuss this will development. This override should take care of your immediate problem

Ext.override(Ext.view.AbstractView, {

indexOf: function(node) {
node = this.getNode(node);
if (node) { // verified node exists
if (Ext.isNumber(node.viewIndex)) {
return node.viewIndex;
return this.all.indexOf(node);
} else return 0;