views:

6

answers:

0

In a form I need to select a couple of nested resources. For that I hava a couple of comboboxes that depend on each other, i.e when a value has been selected in one the request-url of an other is modified and I call getStore().load() on it.

I have a problem here though:
Either I let the comboboxes have mode: "remote" in which case they they trigger a reload with a visual spinner when I press the trigger the first time (as documented), or I let the comboboxes have mode: "local" in which case they do not reload the data but if a request takes a long time there is no visual feedback that it is loading.

Is there a simple way to show a spinner where the red angry invalid-marker is displayed next to the field (i have Ext.form.Field.prototype.msgTarget = 'side') or another nice way to animate the loading of data?

If there isn't I'll have to do some some custom magic but I am hoping someone knows a way.

Thank you.

Appendix A

my DependsOn plugin:

Ext.bm.combobox.DependsOn = function(dependsOn) {
    function init() {
        var cb = this,
            parent = Ext.getCmp(dependsOn);

        parent.on("disable", function() {
            cb.clearValue();
            cb.disable();
        });

        parent.on("select", function() {
            cb.disable(); // dependents will be disabled
            cb.clearValue();
            var store = cb.getStore();
            if (store instanceof Ext.data.JsonStore) {
                store.load();
            }
            cb.enable();
        });

    }
    return {
        init: function(cb) {
            cb.afterRender = cb.afterRender.createSequence(init);
        }
    }
};

and in my JsonStore HttpProxies I have something like the following to handle my nested resources:

listeners: {
    beforeload: function() {
        var url = someLogic();
        this.setUrl(url);
    }
}