extjs 4 dynamic store

Question

I must to update some label that takes data from a store. I must load into the store new data for ex. each 10 seconds. It's easy - use setInternal() (because TaskRunner isn't work o_0)_ and call the store.load event. But my task much more specific. I also have a grid that contains of two columns and takes some data from the store and some data is custom. It means that before columns with a clear store dataindexes there are a few new records in a store with custom string data and some numeric data... It's may be hard to explain by word, but in code it looks so:

//---Store---
Ext.define('App.store.Data', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    storeId:'Data',
    model: 'App.model.DataModel',
    proxy   : {
    type    : 'ajax',
    url: 'http://mybackend',
    reader: {
        type: 'json'
    } 
    },
    data:[first = true],
    listeners:{
        load: function()
        {
            if(first){
            first=false;
            myApp.getController('App.controller.Controller').StoreLoadHandler();
            setInterval(function (){myApp.getController('App.controller.Controller').StoreLoadHandler();},10000);
            }

        }
    }
});
//---Controller---
StoreLoadHandler: function(){
    var store = this.getStore('Data');
    //upload data from base into store
    store.reload(); 
    store.add(
            [
                {
                    fio: 'somedata',
                    //calculate some data and write it into store. All dataindexes are existsin model 
                    operCount: parseInt(this.getStore('Data').first().get('isQuick')),
                    opersvod: (this.getStore('Data').first().get('opersvod')),
                    isQuick:parseInt(this.getStore('Data').first().get('isQuick')),
                    ipk: (this.getStore('Data').first().get('ipk')),
                    allCount: (this.getStore('Data').first().get('allCount')),
                    id: 0
                },
                {
                    fio: 
                    ...
                    id: 1
                },
                {
                    fio: 
                    ...
                    id: 2
                }       
            ]
        );



       //takes my labels and use setText, works brilliant
    Ext.ComponentQuery.query('#TopPanel')[0].items.getAt(0).items.get('inW').setText(this.StoreCalc('iw'));
    Ext.ComponentQuery.query('#TopPanel')[0].items.getAt(1).items.get('isClose').setText(this.StoreCalc('isClose'));
    Ext.ComponentQuery.query('#TopPanel')[0].items.getAt(2).items.get('denied').setText(this.StoreCalc('denied'));
    Ext.ComponentQuery.query('#BottomPanel')[0].items.getAt(0).items.get('allCount').setText(store.getAt(3).get('allCount'));

    //use sort
    store.sort([
    {
        property : 'id',
        direction: 'ASC'
    },
    {
        property : 'fio',
        direction: 'ASK'//'DESC'
    }
    ]);
    store.destroy();
    }

In this case when I call a store.load() method or store.reload() my custom records in store are lost. If I delete this operation from listing my custom data is saves and render in grid with 2 columns (dataindexes are - 'fio' and 'operCount')... Where problem is?

Answer 1

It looks like you calling add method with no data in store. Use callback option of reload method:

store.reload({callback: function() {
          store.add(...);
  } 
})

Note: do not configure reloading timer from load method - it's bad for understanding