ajaxextjsextjs4store

Is it possible to use custom variables in an extjs store?


Currently I am working on a project using ExtJs (Version 5.0.1). Now since I often create stores, I wanted to create some kinde of template to copy or may even extend from.

So I was annoyed to edit the path everytime and created variable above let controller (before I used const, but since more than one store was called, it ended up in some errors)

let controller = "path/to/my/controller/myController.php";

Ext.define("xxx.store.foo.bar.myStore", {
    extend: "Ext.data.Store",
    model: "xxx.model.foo.bar.myModel",
    proxy: {
        type: "ajax",
        timeout: 20000,
        api: {
            read: controller + "?data=read",
            create: controller + "?data=create",
            update: controller + "?data=update",
            destroy: controller + "?data=delete",
        },
        reader: {
            type: "json",
            rootProperty: "data",
            idProperty: "id",
            totalProperty: "total",
        },
        writer: {
            type: "json",
            encode: true,
            writeAllFields: true,
            rootProperty: "data",
            idProperty: "id",
        },
    },
    autoLoad: false,
});

How ever, I am not happy with this and would prefer some kine of internal variable. Something like:

Ext.define("xxx.store.foo.bar.my", {
    extend: "Ext.data.Store",
    model: "xxx.model.foo.bar.my",
    myControllerPath: "this/is/my/path/to/my/controller",
    proxy: {
        type: "ajax",
        timeout: 20000,
        api: {
            read: this.myControllerPath + "?data=read",
            create: this.myControllerPath + "?data=create",
            update: this.myControllerPath + "?data=update",
            destroy: this.myControllerPath + "?data=delete",
        },
        ....

But this. can't be used there like this! (obviously)

What could be a solution for my problem...how could I use a custom variable there?


Solution

  • One solution could be to add a custom property for the controller path to a template store class definition, and use a constructor to set the proxy based on this path. This way you will already be able to use this keyword. Later you use this template to define your store classes.

    See this code, I hope it helps:

    Ext.define("MyStoreTemplate", {
        extend: "Ext.data.Store",
        myController: null,
        constructor: function (config) {
            this.setProxy({
                type: "ajax",
                timeout: 20000,
                api: {
                    read: this.myController + "?data=read",
                    create: this.myController + "?data=create",
                    update: this.myController + "?data=update",
                    destroy: this.myController + "?data=delete",
                },
                reader: {
                    type: "json",
                    rootProperty: "data",
                    idProperty: "id",
                    totalProperty: "total",
                },
                writer: {
                    type: "json",
                    encode: true,
                    writeAllFields: true,
                    rootProperty: "data",
                    idProperty: "id",
                },
            });
        },
        autoLoad: false,
    });
    
    Ext.define("MyModel", {
        extend: "Ext.data.Model",
    });
    
    Ext.define("MyStore", {
        extend: "MyStoreTemplate",
        myController: "path/to/my/controller/myController.php",
        model: "MyModel",
    });
    
    const myStore = Ext.create("MyStore");
    
    console.log(myStore.getProxy());