javascript - ExtJS 4.2.1 如何组织Viewport空间

Question

这是运行良好的代码:

“ObjectsGrid”是一个具有大量行的 Ext.grid.Panel 组件。

Ext.application({
    requires    : ['Ext.container.Viewport'],
    name        : 'crm',
    appFolder   : 'app',
    controllers : ['Controller'],
    launch      : function() {
        Ext.create('Ext.container.Viewport', {
            id      : "MainViewPort",
            layout  : 'fit',
            applyTo : Ext.getBody(),
            items   : [
                {
                    xtype: 'ObjectsGrid'

                }]
        });
    }
});

但是当我尝试通过添加一些面板(内部具有相同的 ObjectsGrid)来组织视口(viewport)空间时，所有网格行都会消失。看起来网格已移出视口(viewport):

Ext.application({
    requires    : ['Ext.container.Viewport'],
    name        : 'crm',
    appFolder   : 'app',
    controllers : ['Controller'],
    launch      : function() {
        Ext.create('Ext.container.Viewport', {
        title : 'main panel',
        layout: 'fit',
        bodyStyle: 'padding:5px',
        applyTo : Ext.getBody(),
        items: [
            {
                xtype: 'panel',
                border: false,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    {
                        html: 'upper panel',
                        height: 20,
                        margin: '0 0 5 0'
                    },{
                        xtype: 'ObjectsGrid'
                    }
                ]
            }
        ]
    });
    }
});

我的网格组件:

Ext.define('crm.view.ObjectsGrid' ,{
        extend: 'Ext.grid.Panel',
        id          : "ObjectsGrid",
        alias       : 'widget.ObjectsGrid',
        store       : 'ObjectFormStore',
        title       : 'title',
        stripeRows  : false,
.....

我的网格出了什么问题？

大型应用程序使用面板组件来组织视口(viewport)空间是否正常？

一定有一些“最佳实践”？

Answer 1

Whats wrong with my grid?

缺少 flex配置值。试试这个:

{
    xtype: 'ObjectsGrid',
    flex: 1
}

is it normal for big application to organize Viewport space with panels component?

如果您需要一个面板并且它实际上是Ext.panel.Panel，那就没问题了。您需要的(而不是仅仅说 Ext.container.Container )。在您的示例中，带有 vbox 布局的面板看起来多余:您可以直接在视口(viewport)上指定 vbox 布局(而不是 fit)。

There must be some "best practice"?

从可用性/用户体验的 Angular 决定您的需求。以最小的复杂性构建它。保留一切必要/合理/合理的东西。不要让多余的东西进来等等。

P。 S. 如果您要从头开始开发新应用，最好使用最新版本的 ExtJS。