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.

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.

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

Customizing Built-in Proxy Objects

You can add extra functionality to built-in 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: some_place_you_choose
};

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

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.

Proxy objects

webix.proxy.myCustomName = {
    $proxy:true,
    load:function(view, callback){
        //your loading pattern
        ...
        webix.ajax(this.source, callback, view); 
    },
    save:function(view, update, dp, callback){
        //your saving pattern for single records        
        ...
        webix.ajax().post(url, 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(){ ... }
};

Predefined methods that can be customized include:

  • load(view, callback) - is used for data loading and takes two parameters:
    • view - object - the component you work with;
    • callback - function, object - loading callback;
  • 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++) { ... }
}

To use a custom proxy, append its name as a prefix to a loading or saving script (or both, if needed):

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