Ext JS 4-使用Hbox，Vbox等以表单形式布置字段

Question

我在窗口（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页面 , Sencha文档, ，最后 另一个 - 最后一个看起来很接近 - 在形式树中，在2列中的字段集，它显示了一个带有项目[]的表单[]和其中一些布局代码，我能够将其部分工作，但不做能够将其转换为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#'
            }
        ]
    }]
});

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

Answer 2

您不能在一个面板中混合两个布局。因此，您必须使用子面板根据各种规则来布局。这些子面板不需要（也不应该）是表单面板，只有带有表单布局的普通面板（因此您将获得现场标签）。我通常会做类似的事情，类似于“形式”字段（extjs sextjs的支持不太支持）类似列的布局：因此，顶式面板具有vbox布局，然后有一些带有Hbox布局的子板和sub--带有字段的表单布局的子面板（或字段组）。在某些情况下，列布局也可能有用。

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