Advanced

Webix Proxy Objects

Both the component's url property and its load function can be used not only for passing the loading script. They can include additional loading logic in proxy objects.

The samples given in this chapter assume that all requests to the server side are performed with the webix.ajax module. For more information, check the Ajax Operations article and webix.ajax API.

Built-in Proxy Objects

There's a list of ready-to-use Webix proxy objects that can be used by adding prefixes to a loading script.

  • offline and cache - for offline support of applications that use server-side data;
  • local - for saving component data into a browser local storage and working with it. Described as part of the offline support article;
  • connector - for saving data via Server Side Connector;
  • rest - for working with a server in the REST mode;
  • post - for loading data in a POST request (GET by default);
  • sync - for loading data via a synchronous Ajax request (by default, loading is performed by an asynchronous request);
  • indexdb - for working with indexedDB in-browser database storage;
  • faye - for enabling live data update on all clients currently using the application. Look here for details;
  • binary - for loading and reading files as arraybuffer;
  • json - for sending JSON data to a server via RESTful "save" requests with the "application/json" content type;
  • GraphQL - for working with a server with the help of the GraphQL API query language.

Prefixes are used before the path to your server-side script:

var list = {
    view:"list"
    url:"offline->load.php",
    save:"offline->load.php" 
};
 
grid.load("rest->load.php")

You can browse the samples of Proxy usage by the link.

Using Methods of Built-in Proxy Objects

The methods of a proxy object are called from the url of the component it's used for:

//returns cached data for this list
list.config.url.getCache();

You can also save an instance of the necessary proxy object in a variable and call all methods from it:

var static_proxy = webix.proxy("cache", "server/datatable.php");
 
var grid = {
    view:"datatable",
    ..config..
    save: static_proxy,
    url: static_proxy
};
 
if (!static_proxy.getCache())
    static_proxy.setCache([
        {"id":1,"title":"The Shawshank Redemption ", 
            "year":"1998","votes":194865,"rating":"7.5","rank":1},
        {"id":2,"title":"The Godfather",
            "year":"1974","votes":511495,"rating":"9.2","rank":2}
    ]);

Related sample:  Datatable: Cache Static Mode

Proxy Object Declaration

A proxy object is a plain JSON object that you create to add extra functionality to your loading and saving pattern.

It features:

  • a compulsory $proxy property set to true;
  • other properties;
  • functions to fire on loading and saving;
  • other methods.

So, firstly you need to define a proxy object with the desired configuration:

webix.proxy.myCustomName = {
    $proxy:true,
    load:function(view, callback, params){
        //your loading pattern
        webix.ajax().bind(view).get(this.source, params, callback); 
    }
};

this.source is used as a reference to the data URL specified in the master component.

Then append the name of the proxy object as a prefix to the corresponding script for the related widget:

{
    view:"datatable",
    url:"myCustomName->load.php"
}
//or, after component initialization
$$("datatable1").load("myCustomName->load.php");

Read about the possibility to create a custom proxy object.

Customizing Built-in Proxy Objects

You can add extra functionality to embed proxy objects or redefine existing properties or methods by extending their functionality.

For instance, you can change the default place for storing cached data of an offline proxy object, which is webix.storage.local by default:

webix.proxy.myCustomName = {
    init:function(){
        webix.extend(this, webix.proxy.offline);
    },
    cache:true
};

and then use it as a prefix to loading and saving scripts:

{
    view:"datatable",
    url:"myCustomName->load.php", 
    save:"myCustomName->load.php"
}
// or, after the component initialization
$$("datatable1").load("myCustomName->load.php");

Creating Custom Proxy Objects

You can create custom proxy objects based on the predefined methods:

webix.proxy.myCustomName = {
    $proxy:true,
    load:function(view, callback, params){
        //your loading pattern
        webix.ajax().bind(view).get(this.source, params, callback); 
    },
    save:function(view, update, dp, callback){
        //your saving pattern for single records               
        webix.ajax().post(this.source, update, callback);
    },
    result:function(state, view, dp, text, data, loader){
        //your logic of server-side response processing
        dp.processResult(state, data, details);
    },
    //other custom properties and methods
    prop1:value1,
    method1:function(){ ... }
};

The predefined methods that can be customized include:

  • load (view, callback, params) - is used for data loading and takes two parameters:
  • save (view, update, dp, callback) - is used for saving single records and is triggered when some changes occur on the client side. Takes four parameters:
    • view - object - the component you work with;
    • update - array - an array of changed records, each of which contains a data object, the id of the record and the name of the operation;
    • dp - object - DataProcessor object;
    • callback - function, object - saving callback;
  • result (state, view, dp, text, data, loader) - is called after data is saved and a server-side response is received. Takes five parameters:
    • state - object - the operation state;
    • view- object - the component you work with;
    • dp - object - DataProcessor object;
    • text - string - the text of a server-side response;
    • data - object - raw data of a server-side response;
    • loader - object - an XHR loader object.

To save all the changes having occurred in the component, you can use the saveAll (view, update, dp, callback) method instead of save. It takes the same parameters as the save method:

saveAll:function(view, update, dp, callback){
    //your saving pattern 
    ...
    for (var i = 0; i < updates.length; i++) { ... }
}
Back to top