Replacing store contents in Ext JS

Question

I need to pick up Ext JS for a project I working on, and here's a simple issue that got surfaced in it which I can't figure out:

Here's my code:

var arrayData = [
    ['Jay Gar','MD'],
    ['Aaron Baker','CA'],
    ['Susan Smith','NY'],
    ['Mary Stein','KT'],
    ['John Zalupic','WA'],
];

var store = Ext.create('Ext.data.ArrayStore',{
    data: arrayData,
    fields: ['personName', 'state']
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'first grid',
    renderTo: Ext.getBody(),
    authoHeight:true,
    width: 250,
    store: store,
    autoScroll: true,
    columns: [
        { header: 'name', dataIndex: 'personName' },
        { header: 'st', dataIndex: 'state', sortable: false }
    ]
});

grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord){
    var newData = [
        ['Poka Boka', 'VK'],
        ['Choko Mok', 'CA']
    ];      

    store.removeAll();
    store.add(newData);    
});       

So basically I populate the grid with default values and whenever one of them is clicked, data in the store is getting replaced with new data, which should in turn prompt re-render of the Grid Panel. It does work, but with one consistent issue:

When I click on any element, the newData values flash below the data it's about to replace and for some reason it shows 3 rows: first one, second one and then first one again. Also, I get an error saying "Uncaught TypeError: Cannot read property 'internalId' of undefined" happening on this line: store.add(newData).

Any idea what might be causing it? I'm using Ext JS 4. Thank you! Luka

Answer 1

The add method is expecting records and you are passing an Array. You should create an instance of your store record type and iterate to create as many records as you need and then add them to the store.

here is an example:

var store=this.getStore();       
    var rt = store.recordType;
    var p = new rt({
        InvoiceLineNum: '',
        LineNumber:'',
        ItemDescription: '',
        Quantity: '',
        UnitPrice: '',
        UnitMeasure:'',
        TotalAmount:'',
        OrderDate:new Date()

    });

    this.stopEditing();
    store.insert(count, p);
    this.startEditing(count, 0);
    this.markEditableCells(count);

I use the insert here but you can use the add just as well.