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