ExtJS Grid Not Displaying Rest Data - extjs

Question

I have created a mini EXTJS app, defined a model, store, and grid. I have verified the store is working because I can use Chrome debug tools to create an instance and view the data. However, when I attempt to display the data in a grid it never shows.
Here is the code for the app.js:
Ext.application({
launch: function () {
Ext.define('Companies', {
extend: 'Ext.data.Model',
fields: ['id', 'link', 'name']
});
Ext.define('CompaniesStore', {
extend: 'Ext.data.Store',
model: 'Companies',
storeId: 'cStore',
autoLoad: true,
proxy: {
type: 'rest',
url: 'http://corky52547.somee.com/Service1.svc/Companies'
}
});
Ext.create('Ext.container.Viewport', {
name : "viewPort2",
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
title: 'Bill Reminder Web'
},
{
xtype: 'grid',
title: 'Bills',
height: 100,
width: 100,
columns: [
{text: 'ID', width: 100, dataIndex: 'id'},
{text: 'Link', flex: 1, dataIndex: 'link'},
{text: 'Name', width: 200, dataIndex: 'name'}
],
store: Ext.create('CompaniesStore',{})
}
]
});
}
});
Update:
I am now able to get the data to display but like this with no theme. How do I update the theme?

Answer 1

CORS (Cross Origin requests) is blocking the request to domain.
Layout Fit is also causing some issues.
To get CORS working, you will need to add
Access-Control-Allow-Origin: *
Otherwise, you can use middle-ware proxy like cors-anywhere
Minor mistakes like field names should be matched with exact case they are available in response.
Here is a working POC Code:
Ext.application({
name: "Application",
launch: function () {
Ext.define('Companies', {
extend: 'Ext.data.Model',
fields: ['ID', 'Link', 'Name']
});
Ext.define('CompaniesStore', {
extend: 'Ext.data.Store',
model: 'Companies',
storeId: 'cStore',
autoLoad: true,
proxy: {
type: 'rest',
url: 'https://cors-anywhere.herokuapp.com/http://corky52547.somee.com/Service1.svc/Companies'
}
});
Ext.create('Ext.container.Viewport', {
name: "viewPort2",
renderTo: Ext.getBody(),
items: [{
title: 'Bill Reminder Web'
}, {
xtype: 'grid',
title: 'Bills',
flex: 1,
columns: [{
text: 'ID',
width: 100,
dataIndex: 'ID'
}, {
text: 'Link',
flex: 1,
dataIndex: 'Link'
}, {
text: 'Name',
width: 200,
dataIndex: 'Name'
}],
store: Ext.create('CompaniesStore', {})
}]
});
}
});
Here is working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2gbc