ProjectCrudManager

Mixin

The listener set for this object.

An object whose property names are the names of events to handle, or options which modifiy how the handlers are called.

See addListener for details about the options.

Listeners can be specified in target class config and they will be merged with any listeners specified in the instantiation config. Class listeners will be fired first:

class MyStore extends Store({
    static configurable = {
        listeners : {
            myCustomEvent() {
            },
            load : {
                prio : 10000,
                fn() { // this load listener handles things first }
            }
        }
    };
});

let store = new MyStore({
  listeners: {
    load: () => { // This load listener runs after the class's },
    ...
  }
});

Handlers as function name

Object event handlers may be specified as a function name. If a string is specified, it is the name of the function in the thisObj object.

If the string begins with up., this object's ownership hierarchy (if present) is scanned for an object which implements that function name:

new Popup({
    tbar : {
        items : {
            myCombo : {
                type      : 'combo',
                editable  : false,
                label     : 'Type',
                listeners : {
                    // Look in owner chain for this function name
                    change : 'up.onFilterChange'
                },
                items     : [
                    'Event',
                    'Task',
                    'Appointment'
                ]
            }
        }
    },
    items : {
        ...
    },
    onFilterChange({ value }) {
        // Handle event type selection here
    }
});

Convenience shortcut to set only the url to load from, when you do not need to supply any other config options in the load section of the transport config.

Using loadUrl:

{
    loadUrl : 'read.php
}

Equals the following transport config:

{
    transport : {
        load : {
            url : 'read.php'
        }
    }
}

When read at runtime, it will return the value from transport.load.url.

Has a corresponding runtime loadUrl property.

Convenience shortcut to set only the url to sync to, when you do not need to supply any other config options in the sync section of the transport config.

Using loadUrl:

{
    syncUrl : 'sync.php
}

Equals the following transport config:

{
    transport : {
        load : {
            url : 'sync.php'
        }
    }
}

When read at runtime, it will return the value from transport.sync.url.

Has a corresponding runtime syncUrl property.

Specify true to automatically call load method on the next frame after creation.

Called on the next frame to allow a Scheduler (or similar) linked to a standalone CrudManager to register its stores before loading starts.

Sets the list of stores controlled by the CRUD manager.

When adding a store to the CrudManager, make sure the server response format is correct for load and sync requests. Learn more in the Working with data guide.

Store can be provided by itself, its id or as a store descriptor.

Has a corresponding runtime crudStores property.

Set to false to only include the id of a removed parent node in the request to the backend (also affects programmatic calls to get changes etc.), and not the ids of its children.

Consider the following scenario, removing parent 1:

{
  id : 1,
  children : [
    { id : 11 },
    { id : 12 }
  ]
}

With includeChildrenInRemoveRequest : false, the backend will only receive the removal of id 1.

With includeChildrenInRemoveRequest : true (the default), the backend will receive the removal of id 1, 11 and 12.

Name of a store property to retrieve store identifiers from. Make sure you have an instance of a store to use it by id. Store identifier is used as a container name holding corresponding store data while transferring them to/from the server. By default, id property is used. And in case a container identifier has to differ this config can be used:

class CatStore extends Store {
    static configurable = {
        // store id is "meow" but for sending/receiving store data
        // we want to have "cats" container in JSON, so we create a new property "storeIdForCrud"
        id             : 'meow',
        storeIdForCrud : 'cats'
    }
});

// create an instance to use a store by id
new CatStore();

class MyCrudManager extends CrudManager {
    ...
    crudStores           : ['meow'],
    // crud manager will get store identifier from "storeIdForCrud" property
    storeIdProperty  : 'storeIdForCrud'
});

The storeIdProperty property can also be specified directly on a store:

class CatStore extends Store {
    static configurable = {
        // storeId is "meow" but for sending/receiving store data
        // we want to have "cats" container in JSON
        id              : 'meow',
        // so we create a new property "storeIdForCrud"..
        storeIdForCrud  : 'cats',
        // and point CrudManager to use it as the store identifier source
        storeIdProperty  : 'storeIdForCrud'
    }
});

class DogStore extends Store {
    static configurable = {
        // storeId is "dogs" and it will be used as a container name for the store data
        storeId : 'dogs',
        // id is set to get a store by identifier
        id      : 'dogs'
    }
});

// create an instance to use a store by id
new CatStore();
new DogStore();

class MyCrudManager extends CrudManager {
    ...
    crudStores : ['meow', 'dogs']
});

When true the Crud Manager does not require all updated and removed records to be mentioned in the sync response. In this case response should include only server side changes.

Please note that added records should still be mentioned in response to provide real identifier instead of the phantom one.

An array of store identifiers sets an alternative sync responses apply order. By default, the order in which sync responses are applied to the stores is the same as they registered in. But in case of some tricky dependencies between stores this order can be changed:

class MyCrudManager extends CrudManager {
    // register stores (will be loaded in this order: 'store1' then 'store2' and finally 'store3')
    crudStores : ['store1', 'store2', 'store3'],
    // but we apply changes from server to them in an opposite order
    syncApplySequence : ['store3', 'store2', 'store1']
});

Has a corresponding runtime syncApplySequence property.

Configuration of the AJAX requests used by Crud Manager to communicate with a server-side.

transport : {
    load : {
        url       : 'http://mycool-server.com/load.php',
        // HTTP request parameter used to pass serialized "load"-requests
        paramName : 'data',
        // pass extra HTTP request parameter
        params    : {
            foo : 'bar'
        }
    },
    sync : {
        url     : 'http://mycool-server.com/sync.php',
        // specify Content-Type for requests
        headers : {
            'Content-Type' : 'application/json'
        }
    }
}

Since the class uses Fetch API you can use any of the Request interface options:

transport : {
    load : {
        url         : 'http://mycool-server.com/load.php',
        // HTTP request parameter used to pass serialized "load"-requests
        paramName   : 'data',
        // pass few Fetch API options
        method      : 'GET',
        credentials : 'include',
        cache       : 'no-cache'
    },
    sync : {
        url         : 'http://mycool-server.com/sync.php',
        // specify Content-Type for requests
        headers     : {
            'Content-Type' : 'application/json'
        },
        credentials : 'include'
    }
}

An object where you can set the following possible properties:

This config validates the response structure for requests made by the Crud Manager. When true, the Crud Manager checks every parsed response structure for errors and if the response format is invalid, a warning is logged to the browser console.

The config is intended to help developers implementing backend integration.

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding runtime catchEventHandlerExceptions property.

If set to true, or a config object, this makes the CrudManager load records only when needed. When a record or a date range that is not already loaded is requested, a load request will be made to the specified URL. More more details about lazy loading, see the guide

Has a corresponding runtime lazyLoad property.

If set to true, this makes the CrudManager load pages of data, instead of loading the complete dataset at once. The requests made to the loadUrl will contain params with info about the current dataset being requested:

• page - The resource page
• pageSize - The resource page size
• startDate - The start date of the calculated timespan
• endDate - The end date of the calculated timespan

For more details about paging, see the guide

When the CrudManager/Project is configured with lazyLoad set to true, you can configure your own data fetching logic by implementing this function. Doing this will override the built-in fetching mechanism using the loadUrl.

When implementing this, it is expected that what is returned is an object fulfilling the contract of a regular CrudManager/Project load call.

An object where property names with a truthy value indicate which events should bubble up the ownership hierarchy when triggered.

const container = new Container({
    items : [
       { type : 'text', bubbleEvents : { change : true }}
    ],

    listeners : {
        change() {
            // Will catch change event from the text field
        }
    }
});

Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.

const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});

Has a corresponding runtime callOnFunctions property.