forms - EXT-JS 应用程序中选项卡内的表单和网格

Question

我正在尝试在 EXT-JS 应用程序中显示搜索表单和网格。我正在尝试这个：

items: [
                {
                    title: 'myTab',
                    xtype: 'myform',
                    xtype:'mygrid',
                    flex:1
                }
       ]

我的问题：当我注释掉

xtype: 'mygrid'

我可以看到搜索表格。当我取消注释该行时，网格与表单重叠。我怎么解决这个问题？

更新：我看到我需要使用 vbox 布局。我正在以各种方式尝试它，但无法弄清楚它应该放在哪里。

Answer 1

您正在混合数组（即[...]）和对象（即{...}）。

Ext 容器中的items选项必须是对象数组。那里的对象可以是原始配置对象或实例化的组件。

因此，您必须使用的语法如下所示：

items: [
    {
        title: 'myTab',
        xtype: 'myform'
    },{
        title: "Grid Tab",
        xtype:'mygrid'
    }
]

看，这类似于整数数组，[1,2,3]除了元素是对象{...}而不是数字。

Answer 2

我想到了。这就是我在代码中添加布局的方式：

items: Ext.create('Ext.tab.Panel', {
            activeTab: 0,
            layout : {            // This is how to save the form from being overlapped by the                      
                                  //grid panel.

                    type: 'vbox',

                    align: 'fit'

                },

            items: [
                {

                    title: 'Single-Activity Resource',
                    items : [

                                {

                                    xtype:'myform'

                                },

                                {

                                    xtype:'mygrid',

                                    flex: 1

                                }

                            ]
                } ...