Webix Proxy Objects

Either the component's url property or its load function can be used not only for passing loading script, but 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 application offline support of applications that use server-side data;
  • local - for saving component data into browser local storage and working with it. Described as part of offline support article;
  • connector - for saving data via Server Side Connector;
  • rest - for working with server in REST mode;
  • post - for loading data in 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 server via RESTful "save" requests with "application/json" content type.

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

var list = {

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

Using methods of Built-in Proxy Objects

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

//returns cached data for this list

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 = {
    save: static_proxy,
    url: static_proxy
if (!static_proxy.getCache())
        {"id":1,"title":"The Shawshank Redemption ", 
        {"id":2,"title":"The Godfather",

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 by default:

webix.proxy.myCustomName = {
        webix.extend(this, webix.proxy.offline);
    cache: some_place_you_choose

And then use it as prefix to load and save scripts:

//or, after component init

Creating Custom Proxy Objects

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

It features

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

Proxy objects

webix.proxy.myCustomName = {
    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
    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 - array of changed records, each of which contains data object, record id and operation name;
    • dp - object - DataProcessor object;
    • callback - function, object - saving callback;
  • result(state, view, dp, text, data, loader) - is called after data is saved and server-side response is received. Takes five parameters:
    • state - object - operation state;
    • view - object - the component you work with;
    • dp - object - DataProcessor object;
    • text - string - server-side response text;
    • data - object - raw data of server-side response;
    • loader - object - XHR loader object.

To save all changes 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 prefix to a loading or saving script (or both, if needed):

//or, after component initialization
Back to top