Ext JS 4 - 使用hbox，vbox等形式填写字段 [英] Ext JS 4 - laying out fields in a form using hbox, vbox, etc

问题描述

我有一个简单的Ext JS 4窗体（MVC样式的应用程序）。下面的例子显示了4个字段。这个例子是简化的，但是现在我需要使用这些字段，并使用hbox和vbox（也可能是其他的）来放置这些字段。

前两个字段，并将一个hbox放在窗体的顶部，以便水平显示，在窗体的顶部，然后将其余的字段放在hbox下面的一个vbox中，以便垂直显示。 p>

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

  Ext.define（'ESDB.view.encounter.Edit'，{
 extends：'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'，
名称：'cid'，
 fieldLabel：'cid＃'
}，
 {
 xtype：'displayfield'，
 name：'addedDate'，
 fieldLabel：'added'
}，
 {
 xtype：'displayfield'，
 name：'clientID'，
 fieldLabel：'Client＃'
} 
} 
] 
 
} 
  

我已经查看了各种布局示例。 sencha页面， sencha docs ，最后另一个 - 最后一个有一些东西看起来很近 - 在表单树中，2列中的fieldsets，它显示一个带有项目[]的表单，里面有一些布局代码，我能够以使其部分工作，但无法将其转换为hbox / vbox样式布局。当我将它设置为hbox时，hbox没有高度，所以我看不到字段。

解决方案

以下是示例：

  Ext.define（'ESDB.view.encounter.Edit'，{
 extends：'Ext.window.Window'，
 alias：'widget.encounteredit'，
 title： '编辑遇到'，
布局：'fit'，
宽度：700，
 autoShow：true，
 
项：[{
 xtype：'形式'，
项目：[
 {
 xtype：'panel'，
 border：false，
 layout：'hbox'，
 items： 
 {
 xtype：'displayfield'，
 name：'id'，
 fieldLabel：'ID'，
 flex：0.5 
}，
 {
 xtype：'displayfield'，
 name：'cid'，
 fieldLab el：'cid＃'，
 flex：0.5 
} 
] 
}，
 {
 xtype：'displayfield'，
 name ：'addedDate'，
 fieldLabel：'added'
}，
 {
 xtype：'displayfield'，
 name：'clientID'，
 fieldLabel ：'客户＃'
} 
] 
}] 
}）; 
  

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

I have a simple Ext JS 4 form inside a window (MVC style app). The example below shows 4 fields. This example is simplified, but now I need to take these fields and lay them out using hbox and vbox (and possibly others?)

How would I for example, take the first two fields and put the in a hbox at the top of the form so they display horizontally, at the top of the form, then take the rest of the fields and put them in a vbox below that hbox so they display vertically?

(my actual form has a lot more fields and I will have various other hbox/vboxes, but I am just looking to get started):

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

   }

I have looked at various examples of layout sencha page , sencha docs, and finally another one -- this last one has something that looks close - in the form tree, fieldsets in 2 columns, it shows a form with items[] and inside there some layout code, and I was able to get that to partially work, but was not able to convert it to an hbox/vbox style layout. When I set it to hbox, there is no height to the hbox, so I can not see the fields.

解决方案

Here is example:

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

If you want to displays blocks in form from up to down, you don't need to change layout. I've wrapped only 2 first display fields into panel with hbox layout (because you want to split only first row).

这篇关于Ext JS 4 - 使用hbox，vbox等形式填写字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！