How can I get sencha architect to read json from rails

Question

I have a Ruby on Rails 3 news app. It takes a title, some content and an image attachment (using the paperclip gem). I'm using the RABL gem to provided a Sencha Architect project with a JSON feed.

The problem is Sencha Architect can't read the JSON url. When I try to load the data into the store I get a very unhelpful message saying 'Unable to load data using the supplied configuration' and a link to open the url in the browser (which opens just fine). Does Sencha Architect have a log somewhere that provides more information about this error?

Here are the RABL files:

# show.rabl
object @article
attributes :title, :body
node(:mobile_url) { |article| article.image.url(:mobile, false) }
node(:tablet_url) { |article| article.image.url(:tablet, false) }
node(:original_url) { |article| article.image.url(:original, false) }

# index.rabl
collection @articles
extends "articles/show"

RABL does not provide a content type by default so I have this in the articles controller:

before_filter :default_format_json

def default_format_json
  if(request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?)
    request.format = "json"
  end
end

This is the code generated by Architect to show the configuration options I have used:

# Stories store
Ext.define('MyApp.store.Stories', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Story'
    ],

    config: {
        autoLoad: true,
        model: 'MyApp.model.Story',
        storeId: 'Stories',
        proxy: {
            type: 'jsonp',
            url: 'https://feedr.org.uk/articles.json',
            reader: {
                type: 'json',
                rootProperty: 'article'
            }
        }
    }
});

# Story model
Ext.define('MyApp.model.Story', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'title'
            },
            {
                name: 'body'
            },
            {
                name: 'mobile_url'
            },
            {
                name: 'tablet_url'
            }
        ]
    }
});

How can I get Sencha Architect to read my JSON data? Any help you can provide is much appreciated.

score 1 · Accepted Answer · answered Nov 12 '12 at 11:57

1

Ok, it turns out there is nothing wrong with the Sencha configuration, the problem was with my rails app. I'm using the RABL gem to generate a Json response. RABL needs to be configured to generate a JsonP response in the form of an initializer like so:

# config/initializers/rabl_init.rb
Rabl.configure do |config|
  config.include_json_root = false
  config.include_xml_root  = false
  config.enable_json_callbacks = true
end

The important option is enable_json_callbacks = true. It causes RABL to serve the response as JsonP which my Sencha app could understand.

answered Nov 12 '12 at 11:57

Craig Walsh

117
8

What about calling the same url with jquery ? I'm stuck on the same problem with it. There's a response, but it remains unparsable. Rails does not seem to provide a javascript parsable' json response; at least not as default – Ben Apr 21 '13 at 14:05
I am a beginner in Sencha Touch, kindly tell in detail because i also have the same issue but I am unable to understand, what is RABL? – Muhammad Ali Hassan Oct 23 '13 at 15:39
Cross domain ajax is not allowed in browser. We need to get a JSONP format instead of JSON format from server in order to tackle cross-domain issue. – TheOneTeam Mar 27 '14 at 07:43

score 0 · Answer 2 · answered Nov 09 '12 at 14:46

0

Not sure if this applies, but when i worked with sencha i had to use this in my store

 config: {
    autoLoad: true,
    model: 'UniversityData.model.Person',
    proxy:{
        type:'ajax',
        url: 'persons.json'
        },
    sorters: ['lastName', 'firstName'],
    grouper: {
        groupFn: function(record){
            return record.get('lastName')[0];
        }
    }
}

It seems the only difference is

      type: 'jsonp'  to my type: 'ajax'

answered Nov 09 '12 at 14:46

DWolf

703
1
7
20

Although this works in Architect to load the data, I get a cross site scripting error when I preview it in the browser. For this reason I am restricted to using JsonP. Thanks anyway. – Craig Walsh Nov 09 '12 at 15:18

How can I get sencha architect to read json from rails

2 Answers2