PDA

View Full Version : XmlStore is not loading remote data



mikih
15 Dec 2010, 8:06 AM
Hi folks,

after all the years I am also diving into extjs :). I am playing around with restful data services and experience a problem with loading remote xml data. Firebug triggers the call under method type "OPTIONS" and gets no response and no data is getting populated to my datagrid. If I use a locale xml file it works fine.

I invested a faerly amount of time to debug it before asking you guys :)

I am using commercial build 3.3.1.

Thanks for helping out.

Flo

My code:


Ext.onReady(function() {
// Application instance for showing user-feedback messages.
// var App = new Ext.App({});

var store = new Ext.data.XmlStore({
autoDestroy : true,
// url : 'test.xml',
url : 'http://..../test.xml',
restful : true,
record : 'item',
idPath : 'wiid',
fields: [
'cartname', 'purgrpdesc', 'costCentre', 'supplier', 'cartamt', 'datecreated', 'requestedby', 'wiid', 'status'
]
});

Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
// App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

Ext.data.DataProxy.addListener('write', function(proxy, action, result,
res, rs) {
// App.setAlert(true, action + ':' + res.message);
});

Ext.data.DataProxy.addListener('read', function(proxy, action, result, res,
rs) {
// App.setAlert(true, action + ':' + res.message);
alert(action + ':' + res.message);
});

Ext.data.DataProxy.addListener('exception', function(proxy, type, action,
options, res) {
if (type === 'remote') {
Ext.Msg.show({
title : 'REMOTE EXCEPTION',
msg : res.message,
icon : Ext.MessageBox.ERROR,
buttons : Ext.Msg.OK
});
}
});

Ext.QuickTips.init();

// NOTE: This is an example showing simple state management. During
// development,
// it is generally best to disable state management as
// dynamically-generated
// ids
// can change across page loads, leading to unpredictable results.
// The
// developer
// should ensure that stable state ids are set for stateful
// components in
// real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/**
* Custom function used for column renderer
*
* @param {Object}
* val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
*
* @param {Object}
* val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// load the store immeditately
store.load();

// create the Grid
var grid = new Ext.grid.GridPanel({
store : store,
columns : [ {
id : 'name',
header : 'Name',
sortable : true,
dataIndex : 'cartname'
}, {
header : 'Description',
sortable : true,
dataIndex : 'purgrpdesc'
}, {
header : 'Requested By',
sortable : true,
dataIndex : 'requestedby'
}, {
header : 'Cost Centre',
sortable : true,
dataIndex : 'costCentre'
}, {
header : 'Amount',
sortable : true,
renderer : 'usMoney',
dataIndex : 'cartamt'
}, {
header : 'Date',
sortable : true,
// renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'datecreated'
}, {
header : 'Status',
sortable : true,
dataIndex : 'status'
}, {
xtype : 'actioncolumn',
width : 50,
items : [ {
icon : '../shared/icons/fam/delete.gif',
tooltip : 'Reject',
handler : function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Reject " + rec.get('cartname'));
}
}, {
icon : '../shared/icons/fam/accept.png',
tooltip : 'Approve',
handler : function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Approve " + rec.get('cartname'));
}
} ]
} ],
stripeRows : true,
autoExpandColumn : 'name',
width : "100%",
title : 'ActionGrid',
// config options for stateful behavior
stateful : true,
stateId : 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');
});

fay
15 Dec 2010, 10:35 AM
If your URL is on a different domain then you will need to use ScriptTagProxy (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.ScriptTagProxy).

mikih
16 Dec 2010, 12:30 PM
Hi, thanks for your help!

I now get an error:

TypeError: Result of expression 'proxy.api' [undefined] is not an object.

I did some research and found some sources that said ScripttagProxy only works with JSON!?


Cheers

Florian


My code:



Ext
.onReady(function() {
var store = new Ext.data.Store(
{
autoDestroy : true,
proxy : {
type : 'scripttag',
reader : "xml",
url : '<external xml rest service>'
},
restful : true,
record : 'item',
idPath : 'wiid',
fields : [ 'cartname', 'purgrpdesc', 'costCentre',
'supplier', 'cartamt', 'datecreated',
'requestedby', 'wiid', 'status' ]
});

Ext.data.DataProxy.addListener('beforewrite', function(proxy,
action) {
// App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

Ext.data.DataProxy.addListener('write', function(proxy, action,
result, res, rs) {
// App.setAlert(true, action + ':' + res.message);
});

Ext.data.DataProxy.addListener('read', function(proxy, action,
result, res, rs) {
// App.setAlert(true, action + ':' + res.message);
alert(action + ':' + res.message);
});

Ext.data.DataProxy.addListener('exception', function(proxy, type,
action, options, res) {
if (type === 'remote') {
Ext.Msg.show({
title : 'REMOTE EXCEPTION',
msg : res.message,
icon : Ext.MessageBox.ERROR,
buttons : Ext.Msg.OK
});
}
});

Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/**
* Custom function used for column renderer
*
* @param {Object}
* val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
*
* @param {Object}
* val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// load the store immeditately
store.load();

// create the Grid
var grid = new Ext.grid.GridPanel({
store : store,
columns : [ {
id : 'name',
header : 'Name',
sortable : true,
dataIndex : 'cartname'
}, {
header : 'Description',
sortable : true,
dataIndex : 'purgrpdesc'
}, {
header : 'Requested By',
sortable : true,
dataIndex : 'requestedby'
}, {
header : 'Cost Centre',
sortable : true,
dataIndex : 'costCentre'
}, {
header : 'Amount',
sortable : true,
renderer : 'usMoney',
dataIndex : 'cartamt'
}, {
header : 'Date',
sortable : true,
// renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'datecreated'
}, {
header : 'Status',
sortable : true,
dataIndex : 'status'
}, {
xtype : 'actioncolumn',
width : 50,
items : [ {
icon : '../shared/icons/fam/delete.gif',
tooltip : 'Reject',
handler : function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Reject " + rec.get('cartname'));
}
}, {
icon : '../shared/icons/fam/accept.png',
tooltip : 'Approve',
handler : function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Approve " + rec.get('cartname'));
}
} ]
} ],
stripeRows : true,
autoExpandColumn : 'name',
width : "100%",
height : 400,
title : 'ActionGrid',
// config options for stateful behavior
stateful : true,
stateId : 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');
});