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

Question

我有一个简单的Ext JS 4窗体内的窗口(MVC风格的应用程序)。下面的示例显示了4个字段。这个例子已经简化了，但是现在我需要使用hbox和vbox(也可能是其他的?)对这些字段进行布局

例如，我如何将前两个字段放在表单顶部的hbox中，以便它们水平显示在表单顶部，然后将其余字段放在该hbox下方的vbox中，以便它们垂直显示?

(我的实际形式有更多的字段，我将有各种其他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文档的各种例子，最后一个-这最后一个有东西看起来很接近-在表单树，字段集在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不太支持):所以顶部表单面板有一个vbox布局，然后有一些hbox布局的子面板和包含字段的表单布局的子面板(或字段集)。在某些情况下，列布局也可能很有帮助。

PS你提到的最后一个例子(2列与字段集)实际上是一个表单面板与列布局包含两个字段集(子面板)与表单布局。它的结构类似于我上面描述的