Centrer un formulaire ext/js

Version imprimable

29/06/2010, 23h03
frman18

Centrer un formulaire ext/js

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.

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:

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

30/06/2010, 16h54
frman18

Merci pour votre aide, je teste ça tout de suite. Sinon, je mets mon formulaire dans un viewport. Merci encore.
30/06/2010, 22h11
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.
30/06/2010, 22h14
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'.
01/07/2010, 02h56
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 ...
01/07/2010, 09h10
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).

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

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

05/07/2010, 17h53
takitano

Bonjour,

première question :

il y a t il kk ch qui s'affiche ... ?
05/07/2010, 22h16
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.
06/07/2010, 00h30
takitano

essayes d'utiliser le layout maison ...

ux.center ...

:ccool:
06/07/2010, 19h21
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.
07/07/2010, 02h29
takitano

1 pièce(s) jointe(s)

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

ps: si on aligne le label à droite ton form est aligné ...
07/07/2010, 02h55
frman18

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

ok, je posterais le code ce soir ...

je suis au bureau ...:aie:
07/07/2010, 16h03
frman18

Merci pour tout Takitano. J'attends.

ne pas oublier de rajouter le css et le js

Code:

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

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
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());
 
});

09/07/2010, 18h46
frman18

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