CODEWITHSUNDEEP
javascriptlistproxyextjssencha-touch-2
tomjerry
tomjerry

Reputation: 105

List not populating with a JsonP proxy

I want to have a Navigation view. I am trying to populate the list in Sencha Touch using a JsonP proxy.

Here's the sample code snippet of what I have tried till now :

var view = Ext.define('MyApp.view.NavigateView', {
    extend: 'Ext.navigation.View',
    xtype:'navigateview',

    config : {
        fullscreen:true,
        styleHtmlContent:true,
        scrollable:true,

        items : [
            {
                title:'Navigation',
                items : [
                    {
                        xtype:'list',
                        store: {
                            fields : ['title','author'],
                            proxy : {
                                type:'jsonp',
                                url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                                    reader: {
                                         type: 'json',
                                         rootProperty: 'responseData.feed.entries'
                                    }
                            },
                            autoLoad:true,
                        },
                        itemTpl:'<div class="contact">{title} <strong>{author}</strong></div>',
                        listeners : {
                            itemtap : function(){
                                Ext.Msg.alert('Called');
                                }
                            }
                        }
                ],

            }
        ]   
   }
});

But the problem is, my list is not getting populated. No items are being shown up in the list.

Also, I am constantly getting this error on console.

XMLHttpRequest cannot load http://api.tinyhippos.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=list.php%3F_dc%3D1334462633038%26page%3D1%26start%3D0%26limit%3D25. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Anyone please guide ? Anything that I am missing here ?

Upvotes: 0

Views: 305

Answers (2)

john
john

Reputation: 1282

i was facing the same error when using AJAX request in cross domain. have a look here

you have to make sure that the server part is configured properly using jsonp

as a first step identify if your application will run correctly when you disable web security in your browser

locate your chrome installation directory then type in your cmd: chrome --disable-web-security

Upvotes: 2

Ga&#235;tan Frenoy
Ga&#235;tan Frenoy

Reputation: 480

Your Ext.navigation.View object is containing one Ext.Component object (xtype not defined so defaulted to 'component') that is containing your list. If you put your list directly as an item of your view, it'll be rendered:

var view = Ext.define('MyApp.view.NavigateView', {
  extend: 'Ext.navigation.View',
  xtype: 'navigateview',

  config : {
    fullscreen: true,
    styleHtmlContent: true,
    scrollable: true,

    items : [{
      title: 'Navigation',
      xtype: 'list',
      store: {
        fields: ['title','author'],
        proxy: {
          type: 'jsonp',
          url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
          reader: {
            type: 'json',
            rootProperty: 'responseData.feed.entries'
          }
        },
        autoLoad:true
      },
      itemTpl: '<div class="contact">{title} <strong>{author}</strong></div>'
    }]
  }
});

Note1: Not sure why your code is not working.

Note2: The error your mentioned is not related to your code snippet

Upvotes: 0

Related Questions