Sencha Touch: dynamically load Ext.List with parametric store

Question

I have an Ext.List that shows an account History for a certain account, for each account I load its own History records, for instance, from this url: www.mysite.com/accounts/loadHistory?=accountId (or by a POST request, doesn't matter).

What is the best practice to reload data for each account when a view is entered?

The way I do it now is as follows:

When a view is entered:

var store = Ext.getStore(storeId);

store.removeAll(); // remove data so the old account's history is not shown until the data of the new account is reloaded
store.setParams(id).load(); // load account data

view:

 Ext.define('myApp.view.AccountHistory', {

    extend: 'Ext.List',

    xtype: 'accounthistory',

    config: {
        store: 'accountHistoryStore',
        emptyText: 'No history available',
        itemCls: 'expandedListItem',
        itemTpl: Ext.create('Ext.XTemplate',
            '<p>{accountId} - {accountText}</p>')
    },

    initialize: function() {

        this.callParent(arguments);

        var accountData = this.config.accountData; // parameter passed to view

        var store = Ext.getStore('accountHistoryStore');
        store.removeAll(); // remove current store records so the old account's info is not shown till the new account is loaded
        store.setParams(accountData.id); // set new proxy url 
        store.load(); // reload history for new account

    }

});

Store:

Ext.define('eMaliApp.store.ChildActivities', {

    extend: 'Ext.data.Store',

    requires: [
        'myApp.model.AccountHistory'
    ],

    config: {
        model: 'myApp.model.AccountHistory',
        storeId: 'accountHistoryStore',
        proxy: {
            type: 'ajax',
            url: myApp.utils.Config.getBaseUrl() + 'account/history',
            method: 'post'
            reader: {
                type: 'json',
                rootProperty: 'history'
            }
        }
    }

});

Martin Martin · Accepted Answer · 2014-08-01T22:32:41

This depends on your workflow. But instead of removing all items from the store when a user wants to see his account history you could also filter the store by his account id (or what ever). So if a user comes back to his account history you won't need to load its data again.

Sencha Touch: dynamically load Ext.List with parametric store

1 Answers