Invalid Label when load json file from server

[grishconner]

/:)I try to load json file from server using store, I alway show this error on firefox's error console.


Invalid label
{"total":"70", "topics":[..................
^


I try to fix every on json file and code, but it not work.
this is my coding:



Ext.onReady(function(){

Ext.QuickTips.init();

// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'total',
idProperty: 'ID',
autoDestroy: true,
timeout: 100000,
fields: [
'ID', 'title', 'main', 'sub', 'mod',
{name: 'pos', type: 'int'},
{name: 'on', type: 'date', dateFormat: 'timestamp'},
'sta'
],
proxy: new Ext.data.ScriptTagProxy({
url: 'http://localhost/admin/modules/01topic/data/01-topic-list.php'
}),
loadexception:{
fn: function(obj, options, response, e){
alert(arguments);
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
},
scope:this
}

});


var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange'},
{name: 'isAds', type: 'int'},
{name: 'lastChange', type: 'date'},
{name: 'statusCode'}
])
});
ds.loadData(myData);

//create check box selection
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: true,
listeners: {
selectionchange: function(sm) {
if (sm.getCount()) {
postGrid.getTopToolbar().getComponent('detailPost').enable();
postGrid.getTopToolbar().getComponent('enablePost').enable();
postGrid.getTopToolbar().getComponent('disablePost').enable();
postGrid.getTopToolbar().getComponent('deletePost').enable();
} else {
postGrid.getTopToolbar().getComponent('detailPost').disable();
postGrid.getTopToolbar().getComponent('enablePost').disable();
postGrid.getTopToolbar().getComponent('disablePost').disable();
postGrid.getTopToolbar().getComponent('deletePost').disable();
}
}
}
});

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
sm,
{header: "????", dataIndex: 'ID', width: 35},
{header: "??????", dataIndex: 'title', width: 160, locked:false, id:'postTitle'},
{header: "????????????", dataIndex: 'main', width: 90},
{header: "????????????", dataIndex: 'sub', width: 90},
{header: "?????", dataIndex: 'mod', width: 90},
{header: "???????", dataIndex: 'pos', align: 'center', width: 35, renderer: isTrue},
{header: "?????????", dataIndex: 'on', align: 'center', width: 39, renderer: Ext.util.Format.dateRenderer('Y-d-m')},
{header: "?????", dataIndex: 'sta', align: 'center', width: 25, renderer: customStatus}
]);

var postGrid = new Ext.grid.GridPanel({
header: false,
region: 'center',
border: false,
store: store,
loadMask: true,
cm: colModel,
stripeRows: true,
layout: 'fit',
autoExpandColumn: 'title',
viewConfig: {forceFit:true},

sm: sm,
// inline toolbars
tbar:[ '????????: ',
{
xtype: 'combo',
store: ds,
displayField: 'company',
valueField:'company',
typeAhead: true,
mode: 'local',
editable: false,
triggerAction: 'all',
emptyText: '????????????...',
selectOnFocus: true,
width: 135
}, '-','????????: ',
{
xtype: 'combo',
store: ds,
displayField: 'company',
valueField:'company',
typeAhead: true,
mode: 'local',
editable: false,
triggerAction: 'all',
emptyText: '????????????...',
selectOnFocus: true,
width: 135
}, '-','?????: ',
{
xtype: 'combo',
store: ds,
displayField: 'company',
valueField:'company',
typeAhead: true,
mode: 'local',
editable: false,
triggerAction: 'all',
emptyText: '?????-????',
selectOnFocus: true,
width: 135
}, '-',{
text:'Refresh',
tooltip:'Reload data from database',
iconCls:'icon-refresh'
}, '-',{
id: 'detailPost',
text:'Detail',
tooltip:'View topic information',
iconCls:'icon-detail',
disabled: true
}, '-',{
id: 'enablePost',
text:'Active',
tooltip:'Public selected topic to listing',
iconCls:'icon-enable',
disabled: true
}, '-', {
id: 'disablePost',
text:'Disable',
tooltip:'Un public selected topic from listing',
iconCls:'icon-disable',
disabled: true
},'-',{
id: 'deletePost',
text:'Delete',
tooltip:'Delete selected topic from database',
iconCls:'icon-delete',
disabled: true
}],
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: store,
displayInfo: true,
displayMsg: '???????????????? {0} - {1} ??? {2}',
emptyMsg: '?????????????????????????????????????'
})
});

//Here is where we create the Form
var postViewport = new Ext.Viewport({
id: 'company-form',
renderTo: document.body,
layout: 'fit',
items: postGrid
});

//Load default topic list
store.load({params:{start:0, limit:100}});

});


And this is json file that past in php file


{"total":"70","topics":[
{"ID":"1","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"1","on":"2009/01/22","sta":"A"},
{"ID":"2","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"3","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"1","on":"2009/01/22","sta":"A"},
{"ID":"4","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"5","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"6","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"7","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"8","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"9","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"10","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"1","on":"2009/01/22","sta":"A"},
{"ID":"11","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"12","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"D"},
{"ID":"13","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"14","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"15","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"16","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"17","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"18","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"19","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"},
{"ID":"20","title":"aaaaaaaaaaaaa","main":"aaaaaaaaaaaaa","sub":"aaaaaaaaaaaaa","mod":"aaaaaaaaaaaaa","pos":"0","on":"2009/01/22","sta":"A"}
]}



What's wrong for my coding?

[[email protected]]

why are you using a script tag proxy for local requests?

[grishconner]

Thank for reply sir, I try to test other technical and use API document.
I just know that my json data that transfer from server, is only text message.
So I must use HTMLProxy instead of ScriptTagProxy.

Thanks you so much.
Grish

[[email protected]]

Look at the script tag proxy API, it will tell you how the JSON should be formatted

[CrazyEnigma]

There are several problems with your code.

You are specifying an ArrayReader, when you result is actually a JsonReader. Oh wait, you have two Stores. Change your JsonStore to Store, and specify a JsonReader like your store, and move the following into the reader:


root: 'topics',
totalProperty: 'total',
idProperty: 'ID',
autoDestroy: true,
timeout: 100000,
fields: [
'ID', 'title', 'main', 'sub', 'mod',
{name: 'pos', type: 'int'},
{name: 'on', type: 'date', dateFormat: 'timestamp'},
'sta'
],
url: 'your url'


The properties highlighted in red are useless in the JsonStore. Highlighted in green should be the location of your server page serving JSON.

Your error is because the Json Store reads "total", when it is expecting ID, title, main, sub, mod, pos, on, sta.

You are doing more than you need specifying the proxy.

On a lighter note: loadexception is deprecated. use exception.

[asle]

Maybe this will help. It helped me:
http://www.extjs.com/forum/showthread.php?t=22990&page=3

/asle

[MatteoSp]

Look at the script tag proxy API, it will tell you how the JSON should be formatted

This, and also what the documentations tells (the server must wrap the data object with a call to a callback function...), is totally pointless. How can you assume I've the control on the server?!?!

The solution (a client-side ExtJs solution) is needed. We need the possibility to modify the Json returned by the server before it's evaluated.

[Animal]

nobody is assuming anything.

If you are not in control of the server, then it's cross domain Ajax, and it's not allowed.