EXTjs 4.2.1 Display default data while loading grid data

Question

I'm using EXTjs 4.2 and I would like to know if there is any way, using the LoadMask or other mechanism, to display default values to the rows of the grid while while scroll up/down action is performed and the grid needs to load info rather than display the empty block of grid or the loading message.

So, for example, after scroll down it will show something like:

|      Column 1      |     Description     |
--------------------------------------------
| value 1            | value 2             |
| value 3            | value 4             |
| value 5            | value 6             |
| loading data...    | loading data...     |
| loading data...    | loading data...     |
| loading data...    | loading data...     |

Then, when the info is loaded it will show the received values, as normal:

|      Column 1      |     Description     |
--------------------------------------------
| value 1            | value 2             |
| value 3            | value 4             |
| value 5            | value 6             |
| value 7            | value 8             |
| value 9            | value 10            |
| value 11           | value 12            |

I've already implemented it inserting manually all this rows with the "Loading data..." info and replacing it at the moment that I get the response, but this needs to use specific code to manage the requests and the store and that's why I'm looking for a solution provided by the EXTjs library, if exists. Thanks.

Answer 1

Based on your information, it seems you are loading each record at a time and then populating the values that you get instead of loading all the store records.

What you have explained seems to be perfect, the only thing is when you get the response back to which record are you going to update? if that is what your question, in the success callback of the ajax request you send the record and use it for updating

For Example

var newlyAddedRecord = mystore.add({Column:'loading data... ', Description:'loading data...'});

Ext.Ajax.request({
    url: 'url to post',
    method: 'POST',
    scope: this,
    success:function(request,options)
    {
        successCallback(request,options,this, newlyAddedRecord);
    },
    failure: handleFailure,
    params: parameters //Any parameters that needs to be passed in request
});

In successCallback function

successCallback: function(request, options, scope, newlyAddedRecord) {
  var jsonData = Ext.JSON.decode(request.responseText); //or the way your data is returned

  newlyAddedRecord.set('Column', jsonData.column);   
  newlyAddedRecord.set('Description', jsonData.description);
  newlyAddedRecord.commit();
}