Class Ext.data.HttpProxy

api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

The url is built based upon the action being executed [load|create|save|destroy] using the commensurate api property, or if undefined default to the configured Ext.data.Store.url.

For example:

api: {
    load :    '/controller/load',
    create :  '/controller/new',  // Server MUST return idProperty of new record

    save :    '/controller/update',
    destroy : '/controller/destroy_action'
}

// Alternatively, one can use the object-form to specify each API-action

api: {
    load: {url: 'read.php', method: 'GET'},
    create: 'create.php',
    destroy: 'destroy.php',
    save: 'update.php'
}

If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the configured url.

Note: To modify the URL for an action dynamically the appropriate API property should be modified before the action is requested using the corresponding before action event. For example to modify the URL associated with the load action:

// modify the url for the action

myStore.on({
    beforeload: {
        fn: function (store, options) {
            // use setUrl to change the URL for *just* this request.

            store.proxy.setUrl('changed1.php');

            // set optional second parameter to true to make this URL change

            // permanent, applying this URL for all subsequent requests.

            store.proxy.setUrl('changed1.php', true);

            // Altering the proxy API should be done using the public

            // method setApi.

            store.proxy.setApi('read', 'changed2.php');

            // Or set the entire API with a config-object.

            // When using the config-object option, you must redefine the entire

            // API -- not just a specific action of it.

            store.proxy.setApi({
                read    : 'changed_read.php',
                create  : 'changed_create.php',
                update  : 'changed_update.php',
                destroy : 'changed_destroy.php'
            });
        }
    }
});

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from ExtJs Components

While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the Element after the Component has been rendered. A plugin can simplify this step:

// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // Component passes itself into plugin's init method
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // Add the listeners to the Element immediately following the render call
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // Collapse combo when its element is clicked on
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Defaults to false. Set to true to operate in a RESTful manner.

Note: this parameter will automatically be set to true if the Ext.data.Store it is plugged into is set to restful: true. If the Store is RESTful, there is no need to set this option on the proxy.

RESTful implementations enable the serverside framework to automatically route actions sent to one url based upon the HTTP method, for example:

store: new Ext.data.Store({
    restful: true,
    proxy: new Ext.data.HttpProxy({url:'/users'}); // all requests sent to /users

    ...
)}

Method   url        action
POST     /users     create
GET      /users     read
PUT      /users/23  update
DESTROY  /users/23  delete

If set to true, a non-phantom record's id will be appended to the url. Some MVC (e.g., Ruby on Rails, Merb and Django) support segment based urls where the segments in the URL follow the Model-View-Controller approach:

someSite.com/controller/action/id

Refer to Ext.data.DataProxy.api for additional information.