ExtJS网格不显示Rest数据

我创建了一个迷你EXTJS应用程序，定义了模型、商店和网格。我已经验证了存储是否正常工作，因为我可以使用Chrome调试工具创建实例并查看数据。但是，当我尝试在网格中显示数据时，它从未显示

下面是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',{})
            }
        ]
    });
}
});

更新：

我现在可以得到数据显示，但像这样没有主题。如何更新主题

CORS（跨源请求）正在阻止对域的请求。 布局匹配也导致了一些问题

要使CORS正常工作，您需要添加

访问控制允许来源：*

否则，您可以使用中间件代理，如

诸如字段名之类的小错误应与响应中可用的确切大小写匹配

这是一个有效的POC代码：

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', {})
            }]
        });
    }
});

---

这里是工作小提琴：

我确认这在本地工作，但我还有其他后续问题。当我在小提琴中看到它时，它附带了一个很好的主题，而我的没有主题。我上传到原来的问题。如何获取更新的主题？如果您使用sencha cmd创建了应用程序，那么您可以编辑app.json并使用已定义的主题（）更改其中的主题。如果你在盒子外面使用它，你应该能够通过导入主题css来应用它们。在我的例子中，使用sencha fiddle，它通过包含在index.html中来应用css开箱即用