Class Ext.data.HttpProxy

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

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);

            // manually set the private connection URL.

            // Warning:  Accessing the private URL property should be avoided.

            // Use the public method setUrl instead, shown above.

            // It should be noted that changing the URL like this will affect

            // the URL for just this request.  Subsequent requests will use the

            // API or URL defined in your initial proxy configuration.

            store.proxy.conn.url = 'changed1.php';

            // proxy URL will be superseded by API (only if proxy created to use ajax):

            // It should be noted that proxy API changes are permanent and will

            // be used for all subsequent requests.

            store.proxy.api.load = 'changed2.php';

            // However, altering the proxy API should be done using the public

            // method setApi instead.

            store.proxy.setApi('load', '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'
});