cross domain problem

[soubhagya ranjan]

I m new to the sencha touch. I am trying to parse the xml file from from a cross domain server, i. e. my application is running on my localhost with this url(http://172.19.72.11:8050/SenchaTouchTest/MyGraph.html)
i am trying to parse a xml file from the server of different ip(http://172.19.72.30:8080/cip-cits/services/CitsService/getOutageMetrics) but i m getting the following error in the chrome console.

XMLHttpRequest cannot load http://172.19.72.30:8080/cip-cits/services/CitsService/getOutageMetrics?_dc=1321004361361&limit=25. Origin http://172.19.72.11:8050 (http://172.19.72.11/) is not allowed by Access-Control-Allow-Origin.


sencha-touch.js:6 (http://172.19.72.11:8050/SenchaTouchTest/resources/js/sencha-touch.js)Uncaught TypeError: Cannot read property 'length' of undefined
[COLOR=red !important]




Ext.setup({
onReady: function() {

var drawComponent = new Ext.draw.Component();
var store = new Ext.data.JsonStore({
fields: ['label','value1','value1name','value2','value2name' ],
method:'get',
proxy: {
type: 'ajax',
url:'http://172.19.72.30:8080/cipcits/services/CitsService/getOutageMetrics',


reader: {
type: 'xml',
root : 'barChartPlotsList',
record: 'barChartPlots'
}
}
});

store.load();
var colors = ['url(#v-1)', 'url(#v-2)'];

new Ext.chart.Panel({
renderTo: Ext.getBody(),
items: drawComponent,
width: 400,
height: 300,

title: 'Root Cause Analysis',
items: {

animate: {
easing: 'bounceOut',
duration: 250

},
store: store,
shadow: false,
gradients: [{
'id': 'v-1',
'angle': 165,
stops: {
80: {

color: '#488AC7'
},
100: {

color: '#2B3856'
}
}
},
{
'id': 'v-2',
'angle': 30,
stops: {
0: {
color: '#C11B17'
},
100: {
color: '#595454'
}
}
} ],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['value1', 'value2'],
minimum: 0,
maximum: 10,
decimal:2,
label: {
renderer: function(v) {
return v.toFixed(0);
}
}

},
{
type: 'Category',
position: 'bottom',
fields: ['label'],
label: {
rotate: {
degrees: 340
}
}


}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},

label: {
display: 'outside',
'text-anchor': 'middle',
field: ['value1', 'value2'],
orientation: 'horizontal',
font:'20px Helvetica, sans-serif'

},

xField: 'label',
yField:['value1', 'value2']

}]

}
});

}});








the xml file is follows



<barChartPlotsList>
<barChartPlots>
<label>FY11Q2</label>
<value1>1</value1>
<value1name>KNOWN</value1name>
<value2>5.4</value2>
<value2name>UNKNOWN</value2name>

</barChartPlots>


<barChartPlots>
<label>FY11Q2</label>
<value1>2</value1>
<value1name>KNOWN</value1name>
<value2>5.8</value2>
<value2name>UNKNOWN</value2name>

</barChartPlots>


<barChartPlots>
<label>FY11Q2</label>
<value1>3</value1>
<value1name>KNOWN</value1name>
<value2>5.1</value2>
<value2name>UNKNOWN</value2name>

</barChartPlots>


<barChartPlots>
<label>FY11Q2</label>
<value1>1</value1>
<value1name>KNOWN</value1name>
<value2>5.7</value2>
<value2name>UNKNOWN</value2name>

</barChartPlots>



</barChartPlotsList>


can anyone please help me thanks in advance

[AndreaCammarata]

Hi,
if you have to load data from a different domain other than the one where the application is loaded, you should use "jsonp" proxy instead of ajax.

Please read more on HTTP access control at the following article.
https://developer.mozilla.org/En/HTTP_access_control

Hope this helps.

[soubhagya ranjan]

hi andreacammarata,

thanks for consider my problem.
i have tried with proxy "jsonp" but i m getting the following error

Uncaught Error: The 'jsonp' type has not been registered with this manager

can u please elaborate ?

[mitchellsimoens]

http://docs.sencha.com/touch/1-1/#!/api/Ext.data.ScriptTagProxy

is the proxy you need. I haven't tried using this proxy with anything but the JsonReader so I'm not sure how it will act using XmlReader.