Ext JS 4- HBOX、VBOXなどを使用してフォームでフィールドをレイアウトする

Question

ウィンドウ（MVCスタイルアプリ）内にシンプルなext JS 4フォームがあります。以下の例は、4つのフィールドを示しています。この例は簡素化されていますが、今ではこれらのフィールドを取り出して、HboxとVbox（およびおそらく他のもの）を使用してレイアウトする必要があります。

たとえば、最初の2つのフィールドを使用して、フォームの上部にHboxを入れて、フォームの上部に水平に表示し、残りのフィールドを取得してその下のVボックスに入れます。 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 Docs, 、 そして最後に もう1つ - この最後のものには近くに見えるものがあります - フォームツリー、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つの最初のレイアウトを使用してパネルにラップしました（最初の行のみを分割する必要があるため）。

Answer 2

1つのパネルに2つのレイアウトを混ぜることはできません。そのため、さまざまなルールに従ってサブパネルを使用してフィールドをレイアウトする必要があります。これらのサブパネルは、フォームレイアウトを備えた通常のパネルだけでなく、フォームパネルをフォームパネルにする必要はありません（したがって、フィールドラベルが取得されます）。フォームフィールドの列のようなレイアウトを実現するために、私は日常的に同様のことを行いました（これはextjsであまりサポートされていません）：トップフォームパネルにはVboxレイアウトがあり、Hboxレイアウトとサブパネルを備えたサブパネルがありました。フィールドを含むフォームレイアウトを備えたサブパネル（またはフィールドセット）。列のレイアウトも場合によっては役立つ場合があります。

PS最後に言及した例（フィールドセット付き2列）は、実際には、フォームレイアウトを備えた2つのフィールドセット（サブパネル）を含む列レイアウトを備えたフォームパネルです。そのため、上記の説明と同様に構成されています。