listview - 列表在 Sencha Architect 设计模式中显示数据，但不在预览或构建中

Question

我在容器中有一个列表视图，然后在表单面板中，又在具有正确配置的休息代理和 json 阅读器的选项卡面板中。在 Sench Architect 2 设计模式下查看时，我可以看到数据项并滚动。但是，当我运行时，屏幕的列表部分是空白的：仅显示停靠在顶部的搜索字段。

我一直在摆弄这个几个小时没有成功，我们将不胜感激。

我的代码如下：

Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.MainTab',

config: {
    items: [
        {
            xtype: 'container',
            title: 'Customer',
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'formpanel',
                    scrollable: 'vertical',
                    items: [
                        {
                            xtype: 'container',
                            layout: {
                                type: 'fit'
                            },
                            items: [
                                {
                                    xtype: 'searchfield',
                                    placeHolder: 'Type customer name'
                                },
                                {
                                    xtype: 'list',
                                    docked: 'bottom',
                                    height: 431,
                                    ui: 'round',
                                    itemTpl: [
                                        '<div>{Name}</div>'
                                    ],
                                    store: 'CustomersStore',
                                    itemHeight: 25,
                                    striped: true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'container',
            title: 'SKU'
        },
        {
            xtype: 'container',
            title: 'Invoice'
        },
        {
            xtype: 'container',
            title: 'Payment'
        }
    ]
}

});

Answer 1

原因是您在容器中采用了适合布局的 2 个控件。你有2个选择。选项 1：使搜索字段停靠在顶部

// your code {
        xtype: 'container',
        layout: {
             type: 'fit'
        },
        items: [
            {
                  xtype: 'searchfield',
                  placeHolder: 'Type customer name',
                  docked: 'top'//Set docked top,
            },
            {
                 xtype: 'list',
                 docked: 'bottom',
                 height: 431,
                 ui: 'round',
                 itemTpl: [
                      '<div>{Name}</div>'
                 ],
                 store: 'CustomerStore',
                 itemHeight: 25,
                 striped: true
             }
     ]}

选项 2：设置容器 vbox 的布局并使用 flex 定义列表的高度

{
                        xtype: 'container',
                        layout: {
                            type: 'vbox'//set layout style to vbox 
                        },
                        items: [
                            {
                                xtype: 'searchfield',
                                placeHolder: 'Type customer name'
                            },
                            {
                                xtype: 'list',
                                docked: 'bottom',
                                height: 431,
                                ui: 'round',
                                itemTpl: [
                                    '<div>{raceDate}</div>'
                                ],
                                store: 'MyNotes',
                                itemHeight: 25,
                                striped: true,
                                flex: 1//define height of list view
                            }
                        ]
                    }

Answer 2

找到原因：控制台显示“Origin .... is not allowed by Access-Control-Allow-Origin”，所以我想我需要使用 JsonP。

让我感到困惑的是我正在运行这个 Sencha 应用程序，http://localhost/...而我的 REST 服务指向http://localhost:8080/...

那怎么会被视为不同的起源呢？