ExtJS 7 - JsonStore.sync() does not call corresponding PHP scripts

Question

I have a Web App that I manually ported from ExtJS 4 to ExtJS 7. For the most part, the read queries work.

However, upon further testing, the create and update queries are not working at all.

For example, there are various dialog boxes/floating panels where I can create and edit certain models using a form, and after the user presses the "Save" button. In ExtJS4, I could simply do the following:

For creating new models:

var model = Ext.create('AppName.model.Model_Name', {});
var store = Ext.getStore('Store_Name');
var form = button.up('form');

form.updateRecord(model);

store.add(model);
store.sync({
    // code for callback
});

And for updating models, I do something like:

var form = button.up('form');
var model = form.getRecord();
var store = Ext.getStore('Store_Name');

form.updateRecord(model);
form.set('field_1', value_1);
form.set('field_2', value_2);

store.sync({
    // code for callback
});

And then I would not have any troubles, the store/proxy would usually execute either the create or the update query as specified.

Here's an example of the store:

Ext.define('App.store.store_name', {
    extend: 'Ext.data.Store',

    requires: [
        'App.model.model_name',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.data.writer.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'store_id',
            batchUpdateMode: 'complete',
            model: 'App.model.model_name',
            proxy: {
                type: 'ajax',
                batchActions: false,
                api: {
                    create: 'folder/folder/createQuery.php',
                    read: 'folder/folder/readQuery.php',
                    update: 'folder/folder/updateQuery.php',
                    destroy: 'folder/folder/deleteQuery.php'
                },
                url: '',
                reader: {
                    type: 'json',
                    keepRawData: true,
                    messageProperty: 'message',
                    rootProperty: 'data'
                },
                writer: {
                    type: 'json',
                    writeAllFields: true,
                    encode: true,
                    rootProperty: 'data'
                }
            }
        }, cfg)]);
    }
});

However, it seems that in ExtJS 7, it doesn't work like this anymore. I placed echo lines in my create and update PHP code just to see if the PHP code gets executed. This usually helps me debug the PHP Code as well. However in this case, none of the echo statements show up.

Is there any parameter I need to implement in the store or proxy?

From 4 to 7 seems like quite a gap, if not only for the years between. Have you tried going to 5 first and compare how it behaves there? And don't they have a migration guide from major to major? Your problem sounds that fundamental, that my educated guess would be that it's covered, if not documented that this functionality is gone. — hakre, Aug 17 '23 at 22:30
It is a big gap, many things have changed (MVC was introduced in 5 and this is a major change). Any case, you can follow this tutorial and you'll see the new way to handle forms (you don't need to create the models, just submit the forms): https://docs.sencha.com/extjs/7.7.0/guides/tutorials/login_app/login_app.html — Arthur, Aug 18 '23 at 14:04
@Arthur I think I need an example of a web app that uses a json store with an ajax proxy and php code. The read queries seem to work as intended, but there's something different with the create/read ones. — Razgriz, Aug 19 '23 at 07:20
Good to know that you solved your problem. Any case, try replacing the proxy type from 'ajax' to 'rest'. — Arthur, Aug 21 '23 at 04:20
There are important differences: mainly, when working with REST, ExtJS will generate or complete the URLs according to the HTTP method that it is using, making it more natural to work with APIs. Ajax, as you have set it up, is more general purpose and effectively can comprehend REST. Check this example to see how to work with forms in ExtJS 6/7: https://www.extjs-tutorial.com/extjs/crud-in-extjs-form-using-load-and-submit — Arthur, Aug 27 '23 at 11:30

score 0 · Accepted Answer · answered Aug 20 '23 at 16:51

The problem was with the PHP File, there was an error related to a date format, and once that was addressed, the query goes through.

There was also a different issue with a different store that I tried in random.

In general, the queries still get called and get executed, but the echo statements no longer show in the developer console log, but it still gets shown in under the "Network" tab and you can pick the php script and see the output there.

ExtJS 7 - JsonStore.sync() does not call corresponding PHP scripts

1 Answers1