列表在 Sencha 架构师设计模式下显示数据，但不在预览或构建模式下显示数据

Question

我在容器中有一个列表视图，然后在表单面板中，又在选项卡面板中，其中包含正确配置的 rest 代理和 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

原因发现：控制台显示有一个"起源......是访问控制允许来源不允许的"，所以我想我需要使用 JsonP。

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

那么为什么这被视为不同的起源呢？

Answer 2

原因是您在具有适合布局的容器中进行了 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
                            }
                        ]
                    }