Discussion :

[BqiKo]

Bonjour tout le monde !

J'ai un problème tout simple mais je n'arrive pas à trouver la solution.
J'ai un tabPanel avec plusieurs onglets, et ces onglets sont trop petits (par rapport au besoin de l'appli).
Je ne trouve pas l'attribut qui gère la taille de ces onglets.

Quelqu'un sait lequel c'est ?

Merci =).

[TsunamiDream]

Hi,

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 /*
     * ================  Form 4  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});



    var tabs = new Ext.FormPanel({
        labelWidth: 75,
        border:false,
        width: 350,

        items: {
            xtype:'tabpanel',
            activeTab: 0,
            defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            }]
        },

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    tabs.render(document.body);

Dans l'exemple d'extJS ce sont ces lignes qui donne la taille. Après je suppose que ça doit être les attributs classique width et height.

Je sais pas si tu as ces liens très utile :

• doc
• exemples

[takitano]

ola,

alors, il faut rajouter à ton objet tabPanel les deux instructions suivantes ...

Code :

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

1
2
3
4
resizeTabs:true,
/*il faut choisir entre tabWidth et minTabWidth*/
tabWidth:110,/*un entier quelconque, on force tous les onglet a 110px*/
minTabWidth:110,/*un entier quelconque, la taille minimum d'un onglet est de  110px*/

bonne journée ...

[BqiKo]

Re-bonjour tout le monde.
Premièrement, merci de vos réponses.

Cependant, cela ne fonctionne pas, mes onglets reste de taille identique..
Voici le code correspondant a mon tabPanel:

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var tabs = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        //frame:true,
        //layout:'fit',
        activeTab: 0,
         resizeTabs:true,
            /*il faut choisir entre tabWidth et minTabWidth*/
            tabWidth:150,/*un entier quelconque, on force tous les onglet a 110px*/
            //minTabWidth:150,
        //autoHeight: false,
        //deferredRender: false,
        listeners : {
            tabchange: function(tabpanel,tab) {
                tab.doLayout();
            }
        },
        items: [{
            title: 'Accueil',
            border: false,
            //layout:'fit',
            iconCls: 'Office',
            items : LastFolderOffice()
        },{
            title: 'Nouveau dossier',
            border: false,
            iconCls: 'NewFolder',
            //layout: 'fit',
            //height: '100%',
            items: NewFolder()
        // html: '<div style="height: 100%; width: 100% background-color: #ff0000">blabla</div>'
        },{
            title: 'Enregistrer un courrier entrant',
            border: false,
            iconCls: 'SaveInMail',
            //layout :'fit',
            items : NewInMail()
        },{
            title: 'Enregistrer un courrier sortant',
            border: false,
            iconCls : 'SaveOutMail',
            //layout :'fit',
            items : NewOutMail()
        },{
            title: 'Base documentaire',
            iconCls: 'DocumentaryBase',
            html: 'Ici, il y aura la base documentaire, regroupant tout les documents qui ont transités',
            border: false
        },{
            title: 'Rechercher un dossier',
            iconCls: 'SearchFolder',
            border: false,
            items : SearchFolder()
        },{
            title: 'Paramétrer',
            iconCls: 'Parametrize',
            border: false,
            items : tabsParam
        }]
    });
    tabs.show();

Merci de m'accorder un peu de votre temps.

[takitano]

rebonjour,

j'ai testé le code de mon précédent post ... et ca marche nickel ...

essayes de remplacer

Code :

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

tabs.show();

par

Code :

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

tabs.doLayout();

[BqiKo]

Bonjour,

Finalement, en augmentant la taille du texte à l'intérieur des onglets, ceux ci augmentent aussi, donc j'ai trouver ma solution.

Pour info takitano, je fais le doLayout avant, donc je ne pense pas que remplacer le tabs.show() par le tab.Layout() change quelque chose.

Merci à vous tous de votre aide.
A bientot.

[takitano]

Bonjour,

Finalement, en augmentant la taille du texte à l'intérieur des onglets, ceux ci augmentent aussi, donc j'ai trouver ma solution.

Pour info takitano, je fais le doLayout avant, donc je ne pense pas que remplacer le tabs.show() par le tab.Layout() change quelque chose.

Merci à vous tous de votre aide.
A bientot.

Bonjour, ton doLayout() est appliqué contenu de ton TabPanel, [c'est à dire aux items de ton tabPanel], ce qui veut dire que tes onglets ne sont pas pris en compte ...

Il me semble que la différence entre la méthode show et doLayout, c'est que le doLayout va recalculer les composants de l'element et de tous ses enfants ... ce que ne fais pas forcément le show().