2

ウィンドウ内に単純な Ext JS 4 フォームがあります (MVC スタイル アプリ)。以下の例は、4 つのフィールドを示しています。この例は単純化されていますが、これらのフィールドを取得して、hbox と vbox を使用してレイアウトする必要があります。

たとえば、最初の 2 つのフィールドをフォームの上部にある hbox に配置して、フォームの上部に水平に表示し、残りのフィールドをその下の vbox に配置するにはどうすればよいでしょうか。 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 page、sencha docsのさまざまな例を見てきましたが、最後に別のもの- この最後のものには似たようなものがあります - フォームツリーで、2 列のフィールドセットで、items[] を持つフォームとそこにあるフォームを示していますいくつかのレイアウト コードがあり、それを部分的に機能させることはできましたが、hbox/vbox スタイルのレイアウトに変換することはできませんでした。hboxに設定するとhboxに高さが無いのでフィールドが見えません。

4

2 に答える 2

4

次に例を示します。

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-29T17:32:38.497 に答える
2

1 つのパネルに 2 つのレイアウトを混在させることはできません。したがって、サブパネルを使用して、さまざまなルールに従ってフィールドをレイアウトする必要があります。これらのサブパネルはフォーム パネルである必要はありません (すべきではありません)。フォーム レイアウトを備えた通常のパネルです (フィールド ラベルが表示されます)。フォーム フィールドの列のようなレイアウトを実現するために、私は定期的に同様のことを行いました (これは extjs ではあまりサポートされていません)。そのため、上部のフォーム パネルには vbox レイアウトがあり、次に hbox レイアウトとサブパネルを持ついくつかのサブパネルがありました。フィールドを含むフォーム レイアウトのサブパネル (またはフィールドセット)。場合によっては、列のレイアウトも役立ちます。

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

于 2011-11-28T20:46:44.827 に答える