4

コンテナーの hbox と vbox レイアウトの入れ子を使用して、extjs でこの構造を作成したいと考えています。周辺コンポーネントは成功しましたが、中央のコンテナを適切に伸ばすことができません。私は何を間違っていますか？

画像は次のとおりです。

ここに画像の説明を入力

中央のグリッド用に、このようなコンテナを作成してみました

var innerContainer = Ext.create('Ext.container.Container', {

    layout:vbox,

    items:[{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    }]
});

私が得る問題は、内側のコンテナをinnerContainerのフルサイズに拡張できないことです。

空のコンテナで width プロパティを設定せずにこれを達成できますか?

それとも、目標を達成するために別の戦略を使用する必要がありますか?

4

1 に答える 1

10

レイアウトを引き伸ばしたい場合は、次を使用する必要があります。

layout: {
   type: 'vbox',
   align: 'stretch'
}

また、最初のコンテナにはレイアウトがあります。vbox は上記である必要があります。

編集: 私はあなたのためにフィドルを作りました: http://jsfiddle.net/Jgpgy/

コンテナーの代わりにパネルを使用したので、視覚的な結果が得られます。それをコンテナーに戻して、タイトル属性を削除するだけです。

于 2012-09-28T06:44:42.023 に答える