PDA

View Full Version : DataStore's Ajax call not working in Safari



charleshimmer
18 Aug 2008, 4:44 PM
I'm new to ExtJs and have been loving it so far. I ran into the following problem.

I have a EditorGrid that loads remote data via a Ext.data.JsonStore and everything works great in FF and IE but for some reason in Safari the grid is just empty.

Any help or ideas would be really appreciated. I've searched the forums all day and haven't seen anything that looks like it might help. I'm not getting any errors in the Web Developer Console Safari has.

Here's the Grid



Ext.ns("Ext.ux.grid.VariableOutflow");

Ext.ux.grid.VariableOutflow = Ext.extend(Ext.grid.EditorGridPanel,
{
/* Public Access
*******************************/
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: new Ext.data.JsonStore({
url: 'month/get_outflow/variable',
baseParams: {method:'post'},
root: 'rows',
autoLoad: true,
fields:['id',
'category',
{name:'budget', type: 'float'},
{name:'spent', type: 'float'},
{name:'difference', type: 'float'},
{name:'pctUsed', type: 'float'},
{name:'recordedCount', type: 'float'}]
}),

initComponent:function()
{
/* Private Variables
*******************************/
Ext.apply(this,
{
clicksToEdit:1,
columns:[{id:'category', header: "Category", sortable: true, dataIndex: 'category', editor: new Ext.form.TextField({allowBlank: false,maxLength: 45})},
{header: "Budget", sortable: true, renderer: 'usMoney', dataIndex: 'budget', editor: new Ext.form.NumberField({allowBlank: false,decimalSeparator : '.',allowDecimals: true,allowNegative: false,blankText: '0',maxLength: 11})},
{header: "Spent", sortable: true, renderer: 'usMoney', dataIndex: 'spent'},
{header: "$ Budget Left", sortable: true, dataIndex: 'difference'},
{header: "% Budget Used", sortable: true, dataIndex: 'pctUsed'},
{header: "", width:20, sortable: true, dataIndex: 'recordedCount'}],
stripeRows: true,
autoExpandColumn: 'category',
autoExpandMin:70,
loadMask: true,
tbar:[{
text:'Add Category',
tooltip:'Add a new variable outflow category.',
iconCls:'add'
//,handler: this.showAddWindow
}, '-',{
text:'Remove Category',
tooltip:'Remove the selected category.',
iconCls:'remove'
//,handler: function(){Ext.MessageBox.confirm('Confirmation','Do you want to delete the category \'' + VarOutflowGrid.prototype.getSelectionModel().getSelected().get('category') + '\'', VarOutflowGrid.prototype.delete);}
}],
iconCls:'icon-grid'
});

Ext.ux.grid.VariableOutflow.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

}

,onRender:function()
{

// before parent code
//this.store.load();
// call parent
Ext.ux.grid.VariableOutflow.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

}

// any other added/overrided methods

});

Ext.reg('variableGrid', Ext.ux.grid.VariableOutflow);

charleshimmer
18 Aug 2008, 7:13 PM
So I went and found an older version of Safari (version 2) and it worked fine. I think this might be a bug with Safari 3 (mac os 10.5). I could be wrong of course but if it works in FF, IE, and Safari 2, and only Safari 3 is having problems then that would make me thing this is a bug with how Ext does Ajax calls with Safari 3.

Anybody have any experience with this?

Condor
18 Aug 2008, 10:44 PM
Some points to check:
- Does the loadexception handler of the store fire?
- Does the load handler of the store fire?
- Could it be that the data is actually loaded, but the grid height is set to 0?

charleshimmer
19 Aug 2008, 7:19 AM
I'm not familiar with load exception, but I added this code

this.store.on('loadexception', function(){
alert('store load exception occured');
}); and in Safari it did fire, not in the other browsers.

What does this mean and what can be done about it?

How do you check if the load handler of the store is firing?

I played around with the height and nothing changed so I am assuming that isn't it.

Condor
19 Aug 2008, 7:24 AM
Check the response status (server connection error) and exception (data conversion error):


this.store.on('loadexception', function(proxy, options, response, e){
alert((response ? response.statusText + ' (' + response.status + ')' : '') + '/' + (e ? e.message : ''));
});

charleshimmer
19 Aug 2008, 8:13 AM
K it came back with 'OK (200)/Parse error'. Would that be the JSON data its hickuping on?

Condor
19 Aug 2008, 10:45 AM
Yes, the JSON data can't be evaluated. Have you tried if it is valid using jslint.com?

charleshimmer
19 Aug 2008, 6:45 PM
Yes I did and everything checked out except it said "Implied Global" which I figured to mean it doesn't have access to the core extjs files.

charleshimmer
19 Aug 2008, 8:33 PM
Figured it out. It was my error, for some reason a trailing slash got in there in the URL and it messed up how the JSON data was sent. Thanks for the help.