PDA

View Full Version : Best pattern for showing data load errors in Component



dtsm12
7 Oct 2012, 1:30 PM
Hi,

what's the best design pattern if you want to show a data load error, or failure, message in a UI component.

For example, if a Store is used by two List components and the Store gets an error during an AJAX load how would you show the error message instead of the list data ?

Thanks.

scottmartin
8 Oct 2012, 8:01 AM
Most errors would be displayed by an messagebox or similar. Were you looking for something unique?

Scott.

dtsm12
8 Oct 2012, 10:33 AM
Yes, we have data from different stores populating a few panels in the same screen.
So rather than flood the user with several pop-ups, in worst cases, I'd like to show the error for each where the data would be.

Does that make sense?

scottmartin
8 Oct 2012, 3:00 PM
Sorry for the confusion ...

When you say an AJAX error... that is rather serious ... so if you have 2 panels and one of the panels does not get the result set due to a call error, you want to display a message somewhere in that form? Like a hidden label that becomes visible with the error message?

Scott.

dtsm12
8 Oct 2012, 11:46 PM
I should have been clearer what I meant by a data load error.
I was mainly thinking about where the data success property is false.
I would also want to cover malformed data & network errors but I can see these would involve different listeners.

Ideally if another List component was added using the same Store that would get updated with the error message without having to maintain a seperate collection of hidden label identifiers.

David.

dtsm12
9 Oct 2012, 12:18 AM
I have found the onStoreLoad function in Ext.panel.Table.
This looks like the right place to handle the success property is false scenario but since its a private function not advisable to use it.

Thoughts ?

stimpy
9 Oct 2012, 2:50 AM
@dtsm

I used a callback on my store like this to test a load event.

Perhaps can use a similar call back in a place that works for you ...




store.load({ callback:function(records, operation, success){
if(success==true){
Ext.ComponentQuery.query('#myItemSelectorId')[0].setValue(['1','2']);
}
}});

dtsm12
9 Oct 2012, 3:03 AM
Sure, we could use a callback in that way.

Is there a similar way you can specifiy a callback for autoloading stores ?

I was hoping to find some way for the view component to listen for data load events and react to any load failures.

David.

stimpy
9 Oct 2012, 4:25 AM
@dstm

I think you can use a call back in your store definition, although i have not tried it .




var mySelOpts=Ext.create('Ext.data.Store',{
model:'mySelModel',
autoload:true,
callback:function(records, operation, success){
if(success==false){
console.log('danger ! dinosaur attack');
//do stuff here }
},
proxy:{
type:'ajax',
url:'myproject/mySelectSource',
reader:{
type:'json',
root:'rows'
}//end reader
}//end proxy
});