Ext JS 4-使用hbox，vbox等在表单中布置字段

Question

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

例如，我将前两个字段放在窗体顶部的hbox中，以便它们在窗体顶部水平显示，然后将其余字段放在下面的vbox中hbox，以便它们垂直显示？

（我的实际表单有更多字段，并且我将有其他各种hbox / vboxes，但我只是想开始使用）：

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页面 ， sencha docs的各种示例，最后是另一个 -表单树中的东西看起来很接近-在两列的字段集中，它显示了一个带有items []的表单，并在其中一些布局代码，我可以使它部分工作，但无法将其转换为hbox / vbox样式的布局。 当我将其设置为hbox时，hbox没有高度，因此看不到字段。

Answer 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#'
            }
        ]
    }]
});

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

Answer 2

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

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