Results 1 to 4 of 4

Thread: cross domain problem

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Bengaluru
    Posts
    12
    Vote Rating
    0
      0  

    Default cross domain problem

    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/se...tOutageMetrics) but i m getting the following error in the chrome console.

    XMLHttpRequest cannot load http://172.19.72.30:8080/cip-cits/se...61361&limit=25. Origin http://172.19.72.11:8050 is not allowed by Access-Control-Allow-Origin.

    • [COLOR=red !important]sencha-touch.js:6Uncaught TypeError: Cannot read property 'length' of undefined[/COLOR]
    [COLOR=red !important]


    Code:
    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

















  2. #2
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Vote Rating
    22
      0  

    Default

    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Bengaluru
    Posts
    12
    Vote Rating
    0
      0  

    Default

    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 ?

  4. #4
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Vote Rating
    1334
      0  

    Default

    http://docs.sencha.com/touch/1-1/#!/...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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •