Does Extjs data Model/Store support any wrapper proxy builder method?

Question

We are using Extjs 5.x for building browser based single page application. Everything is working fine if simple model & store used by us. If we are trying to use any wrapper for proxy it's generate error during runtime after having sencha cmd build.

Here is the simple Model of Article:

Ext.define('Pos.model.Article', {
    extend      : 'Ext.data.Model',
    alias       : 'widget.Article',
    idProperty  : 'id', 
    fields      : [
        { name : 'id',         mapping : 'id',         type : 'int'   },
        { name : 'code',       mapping : 'code',       type : 'string'},
        { name : 'name',       mapping : 'name',       type : 'string'},
        { name : 'rate',       mapping : 'rate',       type : 'float' },
        { name : 'expireDate', mapping : 'expireDate', type : 'date'  }
    ],
    proxy      :   {
        type            : 'rest',
        noCache         : true,
        limitParam      : 'limit',
        startParam      : 'start',
        url             : '/pos/article',
        reader          : {
            type            : 'json',
            rootProperty    : 'data',
            totalProperty   : 'total',
            successProperty : 'success',
            messageProperty : 'message',
            implicitIncludes: true
        },
        writer          :{
            type            : 'json',
            writeAllFields  : true 
        },
        simpleSortMode  : true
    }
});

Here is the simple Store of Article:

Ext.define('Pos.store.Articles', {
    extend       : 'Ext.data.Store',
    model        : 'Pos.model.Article',
    idProperty   : 'id',
    autoLoad     :  false,
    autoSync     :  false,    
    remoteSort   :  true,
    remoteFilter :  true,
    pageSize     :  25,
    proxy        : {
        type            : 'rest',
        noCache         : true,
        limitParam      : 'limit',
        startParam      : 'start',
        url             : '/pos/article/store',
        reader          : {
            type            : 'json',
            rootProperty    : 'data',
            totalProperty   : 'total',
            successProperty : 'success',
            messageProperty : 'message',
            implicitIncludes: true
        },
        writer          :{
            type            : 'json',
            writeAllFields  : true 
        },
        simpleSortMode  : true
    },
    sorters      : [{
        property : 'name', 
        direction: 'ASC'
    }]
});

When we are using simple model and store it working fine. But our goal was removing boiler plate of code for this reason we are trying to build some wrapper method to remove the redundant codes. Here is the simple wrapper of proxy builder for your consideration:

var Cki=Cki||{};

;Cki.proxy||(function($){
    var proxy = {
        $package      : 'Cki',
        $class        : 'Cki.proxy',
        resolveUrl    : function(action){
            var ctxPath = '/pos/',
                url     = ctxPath + action;

            return url;
        },
        getReader           : function(){
            var reader  =  {
                    type            : 'json',
                    rootProperty    : 'data',
                    totalProperty   : 'total',
                    successProperty : 'success',
                    messageProperty : 'message',
                    implicitIncludes: true
                };
            return reader;
        },
        getWriter           : function(){
            var writer =  {
                    type            : 'json',
                    writeAllFields  : true 
                };
            return writer;
        },
        getRestProxy        : function(url, noCache){
            url     = (typeof url === 'undefined') ? '' : url;
            noCache = (typeof noCache === 'undefined') ? false : noCache;
            var restProxy    = {
                type            : 'rest',
                noCache         : noCache,
                limitParam      : 'limit',
                startParam      : 'start',
                url             : proxy.resolveUrl(url),
                reader          : proxy.getReader(),
                writer          : proxy.getWriter(),
                simpleSortMode  : true
            };    
            return restProxy;
        }
    };
    $.proxy = proxy;
}(Cki));

Once the wrapper of proxy builder method is ready, we could use it for wrapping the proxy inside model and store. Here is the wrapped Proxy Model:

Ext.define('Pos.model.Article', {
    extend      : 'Ext.data.Model',
    alias       : 'widget.Article',
    idProperty  : 'id', 
    fields      : [
        { name : 'id',         mapping : 'id',         type : 'int'   },
        { name : 'code',       mapping : 'code',       type : 'string'},
        { name : 'name',       mapping : 'name',       type : 'string'},
        { name : 'rate',       mapping : 'rate',       type : 'float' },
        { name : 'expireDate', mapping : 'expireDate', type : 'date'  }
    ],
    proxy      :   Cki.proxy.getRestProxy('article')
});

Here is the wrapped Proxy Store:

Ext.define('Pos.store.Articles', {
    extend       : 'Ext.data.Store',
    model        : 'Pos.model.Article',
    idProperty   : 'id',
    autoLoad     :  false,
    autoSync     :  false,    
    remoteSort   :  true,
    remoteFilter :  true,
    pageSize     :  25,
    proxy        :  Cki.proxy.getRestProxy('article/store'),
    sorters      : [{
        property : 'name', 
        direction: 'ASC'
    }]
});

It's generate following error during runtime:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
http://localhost/pos/static/Ext-all.js Failed to load resource: the server responded with a status of 404 (Not Found)fetch @ Ext-all.js:22
VM42:3 Uncaught TypeError: c is not a constructor

fradal83 · Accepted Answer · 2016-09-27 07:17:38Z

2

It's very difficult to find your error without debugging it, and I think it would be very difficult even with the code..

I'd suggest you to change the approach you are using to avoid boilerplate code.

I think the best way to achieve this is to extend the rest proxy class, putting there all the default configs. Then you just use your proxy class in your store definition, passing just the url (that seems to be the only difference between models).

Example

    Ext.define('My.data.proxy.Rest', {
        extend: 'Ext.data.proxy.Rest',
        alias : 'proxy.myrest',
        noCache         : true,
        limitParam      : 'limit',
        startParam      : 'start',
        reader          : {
            type            : 'json',
            rootProperty    : 'data',
            totalProperty   : 'total',
            successProperty : 'success',
            messageProperty : 'message',
            implicitIncludes: true
        },
        writer          :{
            type            : 'json',
            writeAllFields  : true 
        },
        simpleSortMode  : true
    });

And in your store you will have

Ext.define('Pos.store.Articles', {
    extend       : 'Ext.data.Store',
    model        : 'Pos.model.Article',
    idProperty   : 'id',
    autoLoad     :  false,
    autoSync     :  false,    
    remoteSort   :  true,
    remoteFilter :  true,
    pageSize     :  25,
    proxy        :  {
         type: 'myrest',
         url: '/pos/article/store',
    },
    sorters      : [{
        property : 'name', 
        direction: 'ASC'
    }]
});

answered Sep 27, 2016 at 7:17

fradal83

2,0221 gold badge12 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Śhāhēēd Over a year ago

Is My.data.proxy.Rest class should be place to the ./overrides/data/proxy/ directory or else where lets us inform?

fradal83 Over a year ago

I don't think it should be an override, just an extension.. So you can place wherever you want... maybe in a util folder or something like that. You shall add it to the requires config

Collectives™ on Stack Overflow

Does Extjs data Model/Store support any wrapper proxy builder method?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related