Manipulating datastore data after loading

Question

I have a backend that returns some JSON data that is used by my datastore through an ajax proxy. The data is then displayed in a dataview. What I need to do is perform some transformation on the received data on client side before it is displayed by the dataview.

I tried various approaches and settled on attaching a handler to the datastore's load event:

Ext.getStore('MyStore').on('load', function (store, records, successful, operation, eOpts) {         
    for (var i = 0; i < records.length; i++) {
        var e = records[i];
        e.data.myField = "constantPrefix" + e.data.myField;
    }
});

The handler fires and records are changed correctly.

Problem is, the dataview still shows unchanged data. Is the whole approach correct? If so, why's it not working; if not - how would you achieve that?

Below is the dataview code:

Ext.define('MyProject.view.MyDataView', {
extend : 'Ext.DataView',
xtype : 'my-dataview',

config : {      
    store : 'MyStore',
    baseCls : Ext.os.deviceType === 'Phone' ? 'my-dataview-phone' : 'my-dataview-tablet',
    mode: 'MULTI',
    allowDeselect: true,
    selectedCls: 'tick-visible',        
    triggerEvent: 'itemdoubletap',


    itemTpl : [
            '<img class="my-photo my-dataview-photo" src="',                        
            '{myField}"></img>'             
        ].join('')              
}
});

Answer 1

instead

 e.data.myField = "constantPrefix" + e.data.myField;

use

var value = "constantPrefix" + e.get('myField');
e.set('myField', value);

model.set() is responsible to trigger necessary events, which the dataview does catch.

cheers, Oleg