Question

我在一个容器中有一个列表视图，依次是在一个表单面板中，依次是一个带有正确配置的rest proxy和json reader的选项卡面板。在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

原因发现：控制台显示“Access-Control-Allow-Origin”不允许“Origin ....”，所以我想我需要使用JsonP。

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

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

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

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

2 个答案: