PDA

View Full Version : How to manage HttpProxy' Stores requests



santosr666
21 Mar 2013, 3:20 PM
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
23 Mar 2013, 6:07 AM
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
25 Mar 2013, 3:48 AM
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
10 May 2013, 4:47 AM
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?