ExtJS 面板不加载里面的网格内容

ExtJS panel does not load grid content inside

我不确定为什么,但如果在常规面板中,ExtJS 不会显示网格的内容。

当我将网格添加到 tab.Panel 时,一切都很好。

Fiddle(有多个文件): https://fiddle.sencha.com/?fiddle=19bi#fiddle/19bi

检查主页选项卡是否有网格。它不使用 Ext.Panel。使用用户选项卡但未显示任何网格。

我项目中的文件:

简单存储 (app\store\Personnel.js)

我的面板有 1 个项目。 当我将 Ext.tab.Panel 更改为 Ext.Panel 时,网格内容不显示 (modern\src\view\main\Main.js)

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    ...

    items: [
    {
        title: 'Home',
        iconCls: 'x-fa fa-home',
        layout: 'fit',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'mainlist'
        }]
    }
]
});

项目本身(myapp\modern\src\view\main\List.js):

Ext.define('MyApp.view.main.List', {
    extend: 'Ext.grid.Grid',
    xtype: 'mainlist',

    requires: [
        'MyApp.store.Personnel'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    ...
});

布局有问题。

显示内容:

/**
 * This view is an example list of people.
 */
Ext.define('MyApp.view.main.Users', {
    extend: 'Ext.Panel',
    layout:'vbox',
    xtype: 'users',

    items: [{
        xtype: 'usersgrid',
        flex:1
    },{
        xtype: 'usersgrid',
        flex:1
    }]
});

据我所知,网格不能强制视图占用所有行的高度。相反,视图不是太大就是太小。在第一种情况下,行下方有白色 space,在第二种情况下,网格是可滚动的。