How to override afterRequest inside a Store - extjs

Question

Based on this fix: http://bit.ly/1Pf59ui, you have to extend "Ext.data.proxy.Ajax". However, one of my stores look like this:
Ext.define('EcommBackoffice.store.Banks',{
extend:'Ext.data.Store',
model:'EcommBackoffice.model.BankModel',
storeId: 'bank-store-id',
autoLoad:false,
sorters: [{
property: 'name',
direction:'ASC'
}],
config: {
loaded:false
},
isLoaded: function(){
return this.getLoaded()
},
listeners: {
load: function(currentthis, records, successful){
if(successful === true){
this.setLoaded(true)
}
}
},
proxy: {
$configStrict: false,
type: 'rest',
id: 'app-banks',
url: EcommBackoffice.Global.getAPIEndPoints().banks,
reader: {
type: 'json',
rootProperty: 'bank'
},
api:{
create: EcommBackoffice.Global.getAPIEndPoints().banks,
update: EcommBackoffice.Global.getAPIEndPoints().banks,
destroy: EcommBackoffice.Global.getAPIEndPoints().banks
},
listeners: {
exception: function(proxy, response, op) {
var oBankStore = Ext.getStore('bank-store-id');
if(response.status === 403 || response.status === 401 || response.status === 503) return; /*skip this exception handler and refer to Applciation Controller handler*/
Ext.Msg.alert('ERROR', response.responseText + ' ' +response.statusText);
}
},
afterRequest:function(request,success){
if(request.method = 'POST' && success){
var oAddBankWindow = Ext.ComponentQuery.query('#add-bank-window');
if(oAddBankWindow[0]) {
oAddBankWindow[0].down('#msgPanel').update('<span style="">New bank added</span>');
oAddBankWindow[0].down('#countryName').update('');
oAddBankWindow[0].down('form').getForm().reset();
}
}
}
}
});
How can I extend "Ext.data.proxy.Ajax" if I am already extending "Ext.data.Store?" When i use $configStrict to allow the override, the current error gets replaced with this one:
Uncaught TypeError: sorter.getRoot is not a function
What should be the proper way of fixing this? I am currently upgrading an existing ExtJS 4.2 application to 6.x.

Answer 1

Ext.data.Store and Ext.data.proxy.Ajax are two different class not for the same purpose. Store is using the proxy.
So the way I'll do it in ExtJs 6 is to create a custom proxy, extending the REST proxy (in your case), and set the type to your custom proxy.
/**
* Custom Proxy
**/
Ext.define('EcommBackoffice.proxy.MyRestProxy', {
extend: 'Ext.data.proxy.Rest',
alias: 'proxy.bank-proxy',
/**
* #override
**/
afterRequest:function(request,success){
this.callParent(arguments); // call to parent as this is a template method
if(request.method = 'POST' && success){
var oAddBankWindow = Ext.ComponentQuery.query('#add-bank-window');
if(oAddBankWindow[0]) {
oAddBankWindow[0].down('#msgPanel').update('<span style="">New bank added</span>');
oAddBankWindow[0].down('#countryName').update('');
oAddBankWindow[0].down('form').getForm().reset();
}
}
}
});
Ext.define('EcommBackoffice.store.Banks',{
extend:'Ext.data.Store',
requires: ['EcommBackoffice.proxy.MyRestProxy'],
model:'EcommBackoffice.model.BankModel',
storeId: 'bank-store-id',
autoLoad:false,
sorters: [{
property: 'name',
direction:'ASC'
}],
// Already existing in Extjs 6
// config: {
// loaded:false
// },
// isLoaded: function(){
// return this.getLoaded()
// },
// listeners: {
// load: function(currentthis, records, successful){
// if(successful === true){
// this.setLoaded(true)
// }
// }
// },
proxy: {
type: 'bank-proxy',
id: 'app-banks',
url: EcommBackoffice.Global.getAPIEndPoints().banks,
reader: {
type: 'json',
rootProperty: 'bank'
},
api:{
create: EcommBackoffice.Global.getAPIEndPoints().banks,
update: EcommBackoffice.Global.getAPIEndPoints().banks,
destroy: EcommBackoffice.Global.getAPIEndPoints().banks
},
listeners: {
exception: function(proxy, response, op) {
var oBankStore = Ext.getStore('bank-store-id');
if(response.status === 403 || response.status === 401 || response.status === 503) return; /*skip this exception handler and refer to Applciation Controller handler*/
Ext.Msg.alert('ERROR', response.responseText + ' ' +response.statusText);
}
}
}
});