Listview 列表以Sencha Architect设计模式显示数据，但不以预览或生成模式显示数据

我在一个容器中有一个列表视图，依次在一个表单面板中，依次在一个选项卡面板中，该选项卡面板具有正确配置的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'
        }
    ]
}

Ext.define（'MyApp.view.MyTabPanel'{
扩展：“Ext.tab.Panel”，
别名：“widget.MainTab”，
配置：{
项目：[
{
xtype:'容器'，
标题：“客户”，
布局：{
类型：“适合”
},
项目：[
{
xtype:'formpanel'，
可滚动：“垂直”，
项目：[
{
xtype:'容器'，
布局：{
类型：“适合”
},
项目：[
{
xtype:“搜索字段”，
占位符：“键入客户名称”
},
{
xtype:'列表'，
停靠：“底部”，
身高：431，
ui:“圆形”，
第三方物流：[
“{Name}”
],
商店：“CustomerStore”，
身高：25，
条纹：对
}
]
}
]
}
]
},
{
xtype:'容器'，
标题：“SKU”
},
{
xtype:'容器'，
标题：“发票”
},
{
xtype:'容器'，
标题：“付款”
}
]
}

---

}))

找到原因：控制台显示有一个“源代码…不允许访问控制允许源代码”，所以我想我需要使用JsonP

让我感到困惑的是，我正在从

http://localhost/...

而我的休息服务指向

http://localhost:8080/...

---

为什么这会被视为一个不同的原点？

原因是您在具有fit布局的容器中使用了2个控件。你有两个选择。 选项1：使searchfield停靠在顶部

// 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
             }
     ]}

//您的代码{
xtype:'容器'，
布局：{
类型：“适合”
},
项目：[
{
xtype:“搜索字段”，
占位符：“键入客户名称”，
停靠：“顶部”//设置停靠顶部，
},
{
xtype:'列表'，
停靠：“底部”，
身高：431，
ui:“圆形”，
第三方物流：[
“{Name}”
],
商店：“CustomerStore”，
身高：25，
条纹：对
}
]}

选项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
                            }
                        ]
                    }

{
xtype:'容器'，
布局：{
键入：“vbox”//将布局样式设置为vbox
},
项目：[
{
xtype:“搜索字段”，
占位符：“键入客户名称”
},
{
xtype:'列表'，
停靠：“底部”，
身高：431，
ui:“圆形”，
第三方物流：[
“{raceDate}”
],
商店：“我的笔记”，
身高：25，
条纹：是的，
flex:1//定义列表视图的高度
}
]
}