vbox et hbox dans extjs

Je veux faire de cette structure dans extjs avec la nidification de hbox et vbox mise en page pour les conteneurs. J'ai réussi à le periferal les composants, mais je ne peux pas étirer correctement les récipients dans le centre. Que dois-je faire de mal?

Voici l'image:

J'ai essayé de créer le conteneur comme ça, pour le centre de la grille

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
        }]
    }]
});

Le problème que je reçois est que je ne peut pas étirer l'intérieur des conteneurs à la taille totale de la innerContainer.

Puis-je réaliser cela avec le récipient vide et sans réglage de la largeur de la propriété?

Ou dois-je utiliser des stratégies différentes pour réaliser mon objectif?

OriginalL'auteur Vlad | 2012-09-28