Taille onglet tabPanel

Version imprimable

27/04/2010, 17h19
BqiKo

Taille onglet tabPanel

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 =).

Hi,

Code:

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 :

ola,

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

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 ...

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:

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.

28/04/2010, 17h33
takitano

rebonjour,

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

essayes de remplacer

Code:

tabs.show();

par

Code:

tabs.doLayout();
29/04/2010, 09h43
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.
29/04/2010, 11h31
takitano

Citation:

Envoyé par 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.

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().
29/04/2010, 11h39
BqiKo

Ah d'accord.
Je ne connaissais pas cette subtilité.

Cela me servira surement un jour ^^.

Merci encore.