Discussion :

[vazkeizh]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[vazkeizh]

Bon, j'ai trouvé une piste sur la FAQ de Sencha :

En mettant une taille height en dur lors de la création du tabpanel, ça passe. C'est pas encore l'idéal mais c'est un bon début.

Pour faire plaisir à Sendusha je remercie ceux qui ont peut être cherché une solution.