PDA

View Full Version : How to clear old data in grid after AJAX failed?



cwtuan
21 Jul 2013, 6:57 PM
After the first time grid is successful to load data, the grid may may fail to load new data later.
However, the old data is still there. How can I clear old data if AJAX failed?
I want to show message like "Internal Error" in grid if AJAX failed.
Thanks!

Farish
21 Jul 2013, 11:04 PM
In the grid's store's proxy, you can add a listener for exception:


listeners: {exception : proxyExceptionHandler }

and then


function proxyExceptionHandler(proxy, response, operation)
{
if(response.status == 401) // you can compare response.status with different HTTP error codes which are likely to appear
{
alert("Error");
// the tricky part here is to figure out which store's proxy had the exception if you have multiple stores and then to clear its data.
// you can get the proxy from a store using getProxy method but you cannot get the store from a proxy.
// One way is to call a function for each of your stores and pass it the proxy from here. In that function, you can then compare store.getProxy() and proxy and when you find a match, clear the store.
}
}

cwtuan
22 Jul 2013, 6:59 PM
Is it possible to apply the solution to global setting?
I want to make all of grids in the application have this behavior.
I'd like to override the Ext.gird.Panel's functions instead of listening on exception for each grid.
Thanks!

Farish
23 Jul 2013, 2:59 AM
you will have to override or extend the store proxy. How exactly, I dont know. Then you can use that component everywhere in your application. Alternatively, you just have to add that one line for listeners to each proxy you are using.

slemmon
24 Jul 2013, 2:53 PM
I've done something similar to the below example in the past myself. If the storeId (or whatever you wanted to route back to) was set dynamically and not statically you'd need to set up the proxy / extraParams in the store's constructor or something like that instead so it could grab the generated ID. But, might give you just one more idea to work with for global handling:



Ext.Ajax.on({
requestexception: function (conn, response, options) {
var store = Ext.getStore(options.params.storeId);
console.log(store);
// now you can interact with the store owning the proxy request
}
});




Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data/json3.json',
reader: {
type: 'json',
root: 'items'
},
extraParams: {
storeId:'simpsonsStore'
}
},
autoLoad: true
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

cwtuan
24 Jul 2013, 6:47 PM
Hi slemmon
I have printed out the params in requestexception, I could not see storeId.
It's the result in my example and I using ExtJS 4.1.1a.



Ext.Ajax.on({
requestexception : function(conn, response, options, eOpts) {
console.log('requestexception options',options);
}
});


params: Object

limit: 25
page: 1
path: "./x"
sort: "[{"property":"type","direction":"DESC"},{"property":"name","direction":"ASC"}]"
start: 0

slemmon
25 Jul 2013, 2:12 PM
If I do the following test case in 4.1.1:


Ext.Ajax.on({
requestexception: function (conn, response, options) {
console.log(options.params);
var store = Ext.getStore(options.params.storeId);
console.log(store);
// now you can interact with the store owning the proxy request
}
});








Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data/json3.json',
reader: {
type: 'json',
root: 'items'
},
extraParams: {
storeId:'simpsonsStore'
}
},
autoLoad: true
});




Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});


It logs the params object:
Object {storeId: "simpsonsStore", page: 1, start: 0, limit: 25}

And I use that to get the store by ID
var store = Ext.getStore(options.params.storeId);

And in this test I'm pointing to a file that simply doesn't exist on my webserver in order to force the exception.