ExtJS 4.2.1 如何组织视口 space

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）来组织视口 space 时，所有网格行都消失了。看起来网格已移出视口：

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,
.....

我的网格有什么问题？

大型应用程序使用面板组件组织视口 space 是否正常？

一定有一些"best practice"?

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 that you need (versus say just an Ext.container.Container）。在您的示例中，带有 vbox 布局的面板看起来多余：您可以直接在视口上指定 vbox 布局（而不是 fit）。

There must be some "best practice"?

从usability/UX的角度决定你需要什么。以最小的复杂性构建它。保持一切必要/合理/理性。不要让多余的东西进来等等等等

P. S. 如果你是从头开始一个新的应用程序，最好使用最新版本的 ExtJS。

ExtJS 4.2.1 如何组织视口 space

ExtJS 4.2.1 How to organize Viewport space

javascript

extjs

viewport

extjs4.2