ExtJs-> Ext.Store.proxy.writer error: No type specified for writer.create

Question

So I have upgraded from extjs4 to extjs6 and this store always have this error:

No type specified for writer.create

This code has two uses:

1. For getting the data for the initial page
2. For getting the data for whenever a button is clicked.

Whenever I comment out the proxy.writer code portion, it will produce the data for the initial page. But whenever I won't comment it out, it will not get the data for the initial page. And it will also return this error whenever I clicked a button:

Uncaught TypeError: items.slice is not a function

So my question is, is the writer portion have wrong syntax or something since it is updated to extjs6?

P.S. I tried to change the this.callOverridden to this.callParent since it states that the this.callOverridden is already deprecated, still has the same error.

Ext.define('Stm.store.stmpdate', {
extend: 'Extends.data.Store',

requires: [
    'Cstm.Setting',
    'Stm.model.stmpdate'
],

model: 'Stm.model.stmpdate',

pageSize: Stm.Const.controller.dataCountLimit,
remoteSort: true,
proxy: {
    type: 'ajax',
    url: Cstm.Setting.getEntryUrl() + '/stm/stm-update/stm-update',
    reader: {
        type: 'json',
        rootProperty: 'data'
    },
    writer: Ext.data.writer.Json.override({
        getRecordData: function() {
            var data = this.callOverridden(arguments);

            var record = arguments[0];

            if ( record.associations.length > 0 ) {
                Ext.Array.each(record.associations.keys, function(key) {
                    data[key] = [];

                    var assocStore = record[key]();

                    Ext.Array.each(assocStore.data.items, function(assocItem) {
                        data[key].push(assocItem.data);
                    });
                });
            }
            return data;
        }
    }),
    api: {
        create: Cstm.Setting.getEntryUrl() + '/stm/stm-update/application',
        update: Cstm.Setting.getEntryUrl() + '/stm/stm-update/approval'
    },
    actionMethods: {
        create: 'POST',
        read: 'POST',
        update: 'POST',
        destroy: 'POST'
    }
},

sorters: [
    {property: 'aplDatetime', direction: 'DESC'},
    {property: 'siteDomain', direction: 'ASC'},
    {property: 'pageName', direction: 'ASC'}
]

});

Model:

Ext.define('Stm.model.stmpdate', {
extend: 'Ext.data.Model',
fields: [
    {name: 'siteId', type: 'integer'},
    {name: 'siteName', type: 'string'},
    {name: 'siteUrl', type: 'string'},
    {name: 'tmpId', type: 'integer', defaultValue: 1},
    {name: 'updType', type: 'string'}
],

hasMany: [{
    model: 'Stm.model.ServerInfo',
    name: 'servers',
    associationKey: 'servers',
    reference: 'tmpId'
}]

});

Answer 1

Yes, you are using override in a way that may have worked in ExtJS 4 but is AFAIK unsupported across all versions of ExtJS.

What you want to do is define your custom writer as a new class:

Ext.define('MyApp.app.data.MyCustomJsonWriter', {
    extend: 'Ext.data.writer.Json',
    alias: 'writer.mycustomjson',
    getRecordData: function() {
        var data = this.callParent(arguments);

        var record = arguments[0];

        if ( record.associations.length > 0 ) {
            Ext.Array.each(record.associations.keys, function(key) {
                data[key] = [];

                var assocStore = record[key]();

                Ext.Array.each(assocStore.data.items, function(assocItem) {
                    data[key].push(assocItem.data);
                });
            });
        }
        return data;
    }
});

require that class from your store:

requires: [
    'MyApp.app.data.MyCustomJsonWriter'
]

and then instantiate it by alias:

writer: {
    type: 'mycustomjson'
}