Layout dans un tabpanel

Bonjour,

J'essaie de faire un tabpanel similaire à celui qu'on voit dans les exemples d'Ext JS (Combination Examples -> Tabs with nested layouts -> inner tab 2). Le but est d'avoir un onglet dans lequel s'affiche un panel séparé horizontalement en 2 parties.

Le Tab Panel est créé lors du lancement de l'application, avec un unique onglet pour l'instant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
launch: function() {
                Ext.create('Ext.tab.Panel', {
                        activeTab: 0,
                        plain: false,
                        renderTo: Ext.getBody(),
                        items: [
                                {
                                        xtype: 'mainpanel',
                                        title: 'Onglet 1'
                                }
                        ]
                });
        }

Ensuite j'initialise le composant mainpanel, sans spécifier de layout au début :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
initComponent: function() {
                // this.layout = 'border';
                this.items = [
                        {
                                xtype: 'configpanel'
                        },
                        {
                                xtype: 'chartspanel'
                        }
                ];
 
                this.callParent(arguments);
        }

Ce qui doit afficher ce genre d'objet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ext.define('app.view.charts.ChartsPanel' ,{
        extend: 'Ext.panel.Panel',
        alias : 'widget.chartspanel',
 
        title: 'Charts',
        layout: 'fit',
        region: 'center',
 
        initComponent: function() {
                this.items = [
                        {
                                html: 'CHARTS'
                        }
                ];
 
                this.callParent(arguments);
        }
});

Là quand je teste, no problem, les éléments s'affichent bien dans l'onglet, l'un au dessus de l'autre.

Seulement, quand je décommente la ligne // this.layout = 'border';, plus rien ne s'affiche dans l'onglet. j'ai essayé avec le layout hbox et le problème est le même. D'après Firebug, les composants sont bien créés et présents, mais ils n'apparaissent pas.

Any idea ?
Merci.