Ext JS 4 - 使用hbox，vbox等格式化字段

我在窗口（MVC样式应用程序）内部有一个简单的Ext JS 4表单。下面的例子显示了4个字段。这个例子是简化的，但现在我需要采取这些领域，并使用hbox和vbox（可能还有其他吗？）Ext JS 4 - 使用hbox，vbox等格式化字段

我将如何，例如，采取前两个领域，并把在一个hbox在顶部的窗体，所以他们水平显示，在窗体的顶部，然后采取其余的领域，并把他们在一个盒子下方的盒子，使他们垂直显示？

（我的实际形式所具有的很多领域，我很多不同的横向盒/纵向方框，但我只是希望上手）：

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 - 这最后一个看起来很接近 - 在表单树中，fieldset在2列中，它显示了一个带有items []的表单，里面有一些布局代码，我能够将它部分地工作，但无法将其转换为hbox/vbox样式布局。当我将它设置为hbox时，hbox没有高度，所以我看不到这些字段。

来源

2011-11-28 Scott Szretter

这里是例子：

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布局的面板（因为你只想分割第一行）。

来源

2011-11-29 17:32:38 Krzysztof

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

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

来源

2011-11-28 20:46:44 nightwatch

Ext JS 4 - 使用hbox，vbox等格式化字段

回答

相关问题