Ext JS 4 - 使用 hbox、vbox 等在表单中布局字段答案

【问题标题】：Ext JS 4 - laying out fields in a form using hbox, vbox, etcExt JS 4 - 使用 hbox、vbox 等在表单中布局字段
【发布时间】：2012-01-08 06:35:21
【问题描述】：

我在一个窗口（MVC 风格的应用程序）中有一个简单的 Ext JS 4 表单。下面的示例显示了 4 个字段。此示例已简化，但现在我需要获取这些字段并使用 hbox 和 vbox（可能还有其他？）进行布局

例如，我将如何获取前两个字段并将它们放在表单顶部的 hbox 中，以便它们在表单顶部水平显示，然后获取其余字段并将它们放在vbox 在那个 hbox 下面，所以它们垂直显示？

（我的实际表单有更多字段，我还会有各种其他 hbox/vbox，但我只是想开始）：

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    initComponent: function() {
        this.items = [

        {
            xtype: 'form',
            items: [
                {
                xtype: 'displayfield',
                name: 'id',
                fieldLabel: 'ID'
                },
                {
                    xtype: 'displayfield',
                    name: 'cid',
                    fieldLabel: 'cid#'
                },
                {
                    xtype: 'displayfield',
                    name: 'addedDate',
                    fieldLabel: 'Added'
                },
                {
                    xtype: 'displayfield',
                    name: 'clientID',
                    fieldLabel: 'Client#'
                }
                     }
     ]

   }

我查看了各种布局示例sencha page、sencha docs，最后是another one——最后一个看起来很接近——在表单树中，2列中的字段集，它显示了一个带有items[] 和里面有一些布局代码，我能够让它部分工作，但无法将其转换为 hbox/vbox 样式布局。当我将它设置为 hbox 时，hbox 没有高度，所以我看不到字段。

【问题讨论】：

标签： forms layout extjs vbox hbox

【解决方案1】：

示例如下：

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    items: [{
        xtype: 'form',
        items: [
            {
                xtype: 'panel',
                border: false,
                layout: 'hbox',
                items: [
                    {
                        xtype: 'displayfield',
                        name: 'id',
                        fieldLabel: 'ID',
                        flex: 0.5
                    },
                    {
                        xtype: 'displayfield',
                        name: 'cid',
                        fieldLabel: 'cid#',
                        flex: 0.5
                    }
                ]
            },
            {
                xtype: 'displayfield',
                name: 'addedDate',
                fieldLabel: 'Added'
            },
            {
                xtype: 'displayfield',
                name: 'clientID',
                fieldLabel: 'Client#'
            }
        ]
    }]
});

如果您想从上到下以表格形式显示块，则无需更改布局。我只将 2 个第一个显示字段包装到具有 hbox 布局的面板中（因为您只想拆分第一行）。

【讨论】：

【解决方案2】：

您不能在一个面板中混合使用两种布局。因此，您必须使用子面板根据各种规则对字段进行布局。这些子面板不需要（也不应该）是表单面板，只是具有表单布局的普通面板（因此您将获得字段标签）。我经常做类似的事情来实现表单字段的列式布局（extjs 不太支持）：所以顶部表单面板有一个 vbox 布局，然后有一些带有 hbox 布局的子面板和 sub-具有包含字段的表单布局的子面板（或字段集）。在某些情况下，列布局也可能会有所帮助。

PS你提到的最后一个例子（2列带有字段集）实际上是一个带有列布局的表单面板，其中包含两个带有表单布局的字段集（子面板）。所以它的结构类似于我上面描述的。

【讨论】：