How to manage HttpProxy' Stores requests

[santosr666]

Hey guys,

In my company we have a UI framework ExtJs based. So there are plenty of "extensions" of Ext components: we have our own grid, drop, formPanel and so on ...

For each component requiring a store there is a JsonStore with a HttpProxy similar to the code below:



// ExtJs 3.4
this.store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'data.records',
activePage: 'data.page',
lineProperty: 'data.line',
totalProperty: 'data.count',
messageProperty: 'data.exception' },
Ext.data.Record.create(recordFields)),
proxy: new Ext.data.HttpProxy({ url: this.url}),
pageSize: this.pageSize
});


Most of the time, our pages look like desktop apps and there is an hierarchical relationship between components. So, to manage the components state/relationship, there is a main function (called "dep.revalidate") to manage a generic store. Each component "extends" this function as well.

Let's see an example:
Let's say I have 3 filter fields (two searchbox and one date box);
Below there is a custom gridPanel which depends on filters' data;
Finally, a custom card layout panel which depends on line selected in the grid;
Any change in the filter fields triggers load in the grid and after grid is ready, by default, firstRow is selected and the information is loaded in the card layout panel. This works fine.
Let's say now, gridPanel is taking too long to retrieve its request and user change any criteria in the filter: well, all components we have, already works in a cascade invalidation system, so when parent changes children are set to invalid and after parent is ready children will be reload.

But I'm worried about requests handling ...

So, when user changes the filter when another request was loading dep.revalidate does something like this:


this.activeRequest = this.store.proxy.activeRequest;

if (this.activeRequest !== undefined && this.activeRequest != null){
Ext.Ajax.abort();
this.store.loadError = null;
if ((this.store.loadOptions) && (this.store.loadOptions.callback) && (this.store.loadOptions.callback instanceof Function)){
// calling callback function with success == false
this.store.loadOptions.callback.call(this, [], null, false);
}
}
this.activeRequest == null;


And this also works fine for me (you might be thinking: "so WTF?").

My doubts are regarding request handling ...

Is it secure to call Ext.Ajax.abort() ? I guess it is cancelling my last request, but I'm not sure that this is always happening ...

What is the meaning of store.proxy.activeRequest? Is this the current/last request?

What about the way I initialize the proxies in the stores (proxy: new Ext.data.HttpProxy({ url: this.url})) ?
Is it ok? Should I initialize a Ext.data.Connection for each proxy and keep its "tId" so I can be sure when cancelling requests by calling Ext.Ajax.abort(tId)? What about initialize a proxy each time I load a store? Is there any good knowing pattern for that?

Any hints will be very welcome!!!

Thanks in advance and sorry about the long, long text ;-)

[mitchellsimoens]

If before the request returns and you execute the Ext.Ajax.abort it will abort the request. You can confirm this in the network dev tools and it should say canceled.

[santosr666]

Ok. But what if there are several request ongoing?

So, is Ext.Ajax.abort() cancelling only the last request?

What about the way I'm handling request (initializating/cancelling)? Is this the correct approach?

Thanks for replying ...

[santosr666]

Still thinking about this ...

I would like my component to cancel a request before creates another request only if the there is a request pending for this component. What is happening now is that only last request gets cancelled no matter who creates it.

Any hint how to achieve that?