How to solve store performance issues in Sencha Touch

Most of the lists in Sencha Touch are connected to a store. When the store only contains a small amount of records, performance is not a problem. However, when the store is filled with a big amount of records, it is very important that the data is added in an optimum manner.

Let's have a look at the following code:

copyObjects : function(objects) {
   var taskModel = null, 
       taskStore = Ext.getStore('Tasks');

   taskStore.removeAll(true);

   Ext.Array.each(objects, function (data) {
      taskModel = Ext.create('MyApp.model.Task', data);
      taskModel.setDirty(true);
      taskStore.add(taskModel);
   });
   taskStore.sync();
}

In the above example, 100 objects are added. Tested on a Samsung Galaxy II, the execution takes 12 to 14 seconds. It simply takes too long!

After further testing, I found out that the add function takes so much time (http://docs.sencha.com/touch/2.3.1/source/Store.html # Ext-data-store-insert method). Therefore, the solution is to call this function as less as possible. This can be done with a temporary array:

copyObjects : function(objects) {
   var taskModel = null, 
       taskStore = Ext.getStore('Tasks'),
       tmp = new Array();

    taskStore.removeAll(true);

    Ext.Array.each(objects, function (data) {
       taskModel = Ext.create('MyApp.model.Task', data);
       taskModel.setDirty(true);
       tmp.push(taskModel)
    });
    taskStore.add(tmp);
    taskStore.sync();
}

The execution time takes only one second now.

Advice: Pay attention that your list is not too long, because the scrolling performance will go down as well.