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空间时，所有网格行都会消失。看起来网格已移出视口：

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

我的网格出了什么问题？

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
    android:id="@+id/you_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#00ff00">

</FrameLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

</RelativeLayout>

大型应用程序组织Viewport空间是否正常面板组件？

如果你需要一个面板并且它实际上是你需要的Ext.panel.Panel，那就没关系了（而不仅仅是Ext.container.Container ）。在您的示例中，带有{ xtype: 'ObjectsGrid', flex: 1 }布局的面板看起来多余：您可以直接在视口上指定vbox布局（而不是vbox）。

必须有一些＆＃34;最佳做法＆＃34;？

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

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

ExtJS 4.2.1如何组织视口空间

1 个答案: