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等格式化字段

回答

相關問題