layout - extjs動的列数

Question

Extjs フォームで動的な数のフィールド列を持つ方法を探しています。

基本的に、フォームは次のようになります (2 列):

ただし、ユーザーがブラウザーの幅を縮小すると、次のように変更されます (1 列):

これを行う方法はありますか？

Answer 1

これを行うことは間違いなく可能です。動作させるには、CSS を少し使用するだけです。私は CSS をフォーム構成に直接適用しましたが、独自の CSS ファイルに簡単に配置することもできます。

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        layout: 'auto',
        defaults: {
            xtype: 'textfield',
            style: {
                float: 'left',
                width: 200
            }
        },
        items: [
            { fieldLabel: 'Field 1' },
            { fieldLabel: 'Field 2' },
            { fieldLabel: 'Field 3' },
            { fieldLabel: 'Field 4' },
            { fieldLabel: 'Field 5' },
            { fieldLabel: 'Field 6' }
        ]
    });

ブラウザのサイズを 2 つの列が収まらないサイズに変更すると、2 つの列が自動的に 1 つの列に折り返されます。

ここで表示する例を作成しました: http://jsfiddle.net/Asuza/n7Zsj/

開くと、2 列のフィールドが表示されます。CSS 本文の幅を 300px に変更し、フィドルを再実行すると、列数が 1 になるはずです。これは、ブラウザのサイズを手動で変更するのと同じです。

Answer 2

さまざまなレイアウトで遊んでみてください。最初に、フォームレイアウトをアンカーに設定し、すべての要素に固定幅を指定することを試みると思います。