Discussion :

[frman18]

Bonjour tout le monde,
Je suis un nouvel utilisateur de la librairie ext/js, j'essaie de centrer un formulaire que j'ai créé avec cette librairie mais en vain. Est-ce que quelqu'un pourrait me donner un coup de main là dessus? Ça fait plusieurs heures que je cherche une solution mais sans succès jusqu'à présent. Merci d'avance pour votre aide.

[Mako 5013]

Bonjour,

Comment affiches-tu ton formulaire ? Tu lui dis de s'afficher à l'aide d'un 'renderTo' ?

Sinon, pour centrer, tu as la possibilité de faire ceci peut-être :

Code :

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

1
2
3
4
5
6
7
 
var form = new Ext.form.Formpanel({
     //configuration du formulaire
     style: {position: 'absolute', // similaire a du html classique
               left: 50%,
               top: 50%}
});

Ou bien alors, tu peux utiliser 'autoHeight' et/ou 'autoWidth' pour prendre toute la place disponible.

Mako

[frman18]

Merci pour votre aide, je teste ça tout de suite. Sinon, je mets mon formulaire dans un viewport. Merci encore.

[frman18]

Bonjour,
J'ai essayé avec la solution que tu m'as proposé mais ça n'a pas marché. En fait, je crée un formulaire de la façon suivante (xtype: 'form'), je n'utilise donc pas un formPanel. Je voudrais que les items que j'ai placés dans ce formulaire soit alignés au centre. Pour le moment, je vois des instructions comme 'text-align: center' mais qui ne permettent que d'aligner du texte et pas tous les items (textfields, RadioGroup, ComboBox,...). j'ai beau cherché sur la toile, pas moyen de m'en sortir avec ce problème qui me semblait pourtant facile au départ. Merci d'avance pour toute aide.

[frman18]

Ah j'avais oublié de te préciser que j'affiche mon formulaire avec 'contentEl', je me dis que c'est sensiblement la même chose que 'renderTo'.

[takitano]

Bonsoir,

il faut préciser ...
ke veux tu centrer, le label, textfield, les deux ...
Tu devrais nous faire un dessin ... parce que la, je ne comprends pas ...

[Mako 5013]

Bonjour,

Comme le dit takitano, c'est un un peu confus pour le moment...

Si tu souhaites que les différents contrôles de ton formulaire soient centrés par rapport à ce dernier, ce n'est pas la même chose que si tu souhaites que ton formulaire soit centré par rapport à ton viewport...Donc un peu de code et une image serait d'une grande aide pour la compréhension.

Mako

Edit: Utiliser 'contentEl' ne revient pas vraiment au même que 'renderTo'. Le premier affiche le contenu de la div dans l'élément Ext JS (pratique si tu veux récupérer un layout ou des composants html sans les modifier), et le second te permet plutôt de placer ton composant Ext JS (le plus souvent dans une div vide, qui sert de point d'ancrage).

[frman18]

Bonjour,
En fait j'ai placé mon formulaire dans un viewport tel que dans le bout de code ci-dessous:

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
var vp = new Ext.Viewport({
 
        layout: 'border',
	style: 'margin:0 auto',
 
        items: [{
            region: 'north',
            id: 'north_pnl',
            xtype: 'panel',
            height: north_panel_height,
            items: [{
                xtype: 'box',
                el: 'header',
                border: false,
                height: north_header_height
 
            /////////////
            // TOOLBAR //
            /////////////
 
            }]
 
        }, {
            xtype: 'form',
			title: '',
            id: 'query_form',
            frame: true,
            bodyStyle: 'padding:auto',
 
            autoScroll: true,
            labelAlign: 'top',
			buttonAlign: 'center',
 
            //activeTab: 0,
            //layoutOnTabChange: true,
			 contentEl: 'map_vp_div',
             //id: 'query_tab_pnl',
			 height: 200,
 
            region: 'center',
            split: true,
 
            // The first tab is a dummy one to be removed at UI init.
            // This prevents a strange bug affecting the layout of the 
            // first tab form (see init.js).
             items: [ {...

Ce que je veux c'est pouvoir aligner tout le contenu de mon formulaire (xtype:form) au centre.
Excusez-moi pour avoir réagi tardivement, j'étais en déplacement.
Merci beaucoup de l'aide que vous m'apportez.

[takitano]

Bonjour,

première question :

il y a t il kk ch qui s'affiche ... ?

[frman18]

Bonjour,
Oui, mon formulaire s'affiche bien mais il est complètement à gauche. Ce que je n'arrive à faire c'est le centrer. J'ai essayé de décaler tous les éléments de mon formulaire avec bodyStyle: 'padding:5px 450px 0' mais ça décale vers la droite au même endroit tandis ce que moi je veux carrément centrer tout mon formulaire. J'ai voulu aussi essayer avec margin: 0 auto mais il semble que ça ne marche pas en tout cas ça n'a eu aucun effet sur mon formulaire. Merci de bine vouloir m'aider à m'en sortir avec ce problème qui perdure.

[takitano]

essayes d'utiliser le layout maison ...

ux.center ...

[frman18]

Bonjour Takitano,
J'ai essayé avec le ux.center mais ça ne change rien. Est-ce qu'il y aurait une instruction du genre text-align mais pour les textfilelds, Radiogroups, ... Merci pour le temps consacré à m'aider.

[takitano]

c'est un truc comme ca ... que tu veux ...?

ps: si on aligne le label à droite ton form est aligné ...

[frman18]

Oui, c'est ce qu'il me faudrait exactement. Mais je n'arrive pas à trouver comment y parvenir.
Merci bien.

[takitano]

ok, je posterais le code ce soir ...

je suis au bureau ...

[frman18]

Merci pour tout Takitano. J'attends.

[takitano]

ne pas oublier de rajouter le css et le js

Code :

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

1
2
    <script type="text/javascript" src="../ux/CenterLayout.js"></script>
    <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />

Code javascript :

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
Ext.onReady(function(){
 
var toto =	new Ext.Viewport({
    layout: 'border',
	height:500,
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        //autoHeight: true,
        height:100,
		border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 200,
        margins: '0 5 0 0'
        // the west region might typically utilize a TreePanel or a Panel with Accordion layout
    }, {
        region: 'south',
        title: 'Title for Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'Title for the Grid Panel',
        collapsible: true,
        split: true,
        width: 200,
		html:'test'
        //xtype: 'grid',
        // remaining grid configuration not shown ...
        // notice that the GridPanel is added directly as the region
        // it is not "overnested" inside another Panel
    }, {
        region: 'center',
		xtype:'panel',
		layout:'ux.center',
		items:{
			xtype: 'form', // TabPanel itself has no title
			layout:'form',
			width:'50%',
			//height:'20%',
			autoHeight: true,
			items: [{
				xtype:'textfield',
				fieldLabel :'test 1'
				},{
				xtype:'textfield',
				fieldLabel :'test 1'
				}]
			}
    }]
}).render(Ext.getBody());
 
});

[frman18]

Bonjour takitano,
Merci pour ton aide. J'ai testé et ça correspond à ce que je voulais. Merci encore.