layout - ExtJSレイアウト、水平方向に拡大してから垂直方向に拡大

Question

Ext.panel.Panelがあり、アプリケーション内のさまざまな「もの」を表す他の「小さい」パネルを動的に追加したいと考えています。このパネルはグリッドの上部にあり、グリッドと同じ幅です。この「コンテナパネル」に「小さい」パネルを動的に追加する場合、すべての「小さい」パネルの合計幅がコンテナの幅よりも大きい場合は、パネルを水平に追加してから垂直に追加します。

私は「fit」、「hbox」、「vbox」、すべてを試しました。

レイアウトタイプがありませんか？

Answer 1

上記のExtJS4.2.2の例を使用すると、パネルが垂直に積み重ねられていることがわかりました。

追加する必要がありました：

style: {
    float: 'left'
},

各アイテムに、そしてすべてがうまくいきました。

静的構成（上記の例のように）と動的追加/削除（子アイテムごとにカスタムコンテナーを使用）の両方でテストしました。コンテナパネルは、毎回フローのように再レンダリングされました。ブラウザウィンドウのサイズを変更するときも修正します-子アイテムは新しいパネルサイズに対応するように移動しました。

マレー

Answer 2

あなたが求めているのは一般にレイアウトとして知られており、flowExtJSにはすぐに使用できるものはありません（私に言わせれば、非常に一般的なレイアウトであり、実際に適用されているものであるため、少しばかげています）ほとんどのデータビューの例ですが、レイアウトではなくcssを使用しています）。

columnWidthただし、定義せずに列レイアウトを使用すると簡単に実現できます。この答えをコピーする：

 Ext.create('Ext.Panel', {
        width: 500,
        height: 280,
        title: "ColumnLayout Panel",
        layout: 'column',
        renderTo: document.body,
        items: [{
            xtype: 'panel',
            title: 'First Inner Panel',
            width:  250,
            height: 90
        },{
            xtype: 'panel',
            title: 'Second Inner Panel',
            width: 200,
            height: 90
        }, {
            xtype: 'panel',
            title: 'Third Inner Panel',
            width: 150,
            height: 90
        }]
  });