aide pour fieldset: les fieldLabel du textfield dans le fieldset ne s'affiche pas [Résolu]

cecilia9 · 12/12/2010, 14h12

Bonjour,
Je débute juste en EXTJS et j'ai un petit problème.
Les fieldLabel du textfield dans le fieldset ne s'affiche pas.
J'aurai besoin d'aide.

Voici, mon code:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
new Ext.FormPanel({
			title: 'G\351n\351ral',
			labelAlign:'right',
			width: 350,
			height: 400,
			layout:'form',
			id: 'patient-form',
			standardSubmit: true, 
			frame:true,
			defaultType: 'textfield',
	        items: [{
				xtype: 'label',
				fieldLabel: 'Soci\351t\351 Investisseur',
				id: 'SoInvest',
				labelStyle: ' width: 170px; color:#0A3E83; font-size: 14px; font-weight: bold'
			},{
			   fieldLabel: '',
			   name: 'Societe__DenominationSociale',
			   id: 'Societe__DenominationSociale',
			   allowBlank:false,
			   labelStyle: ' width: 0px;',
			   clearCls: 'padding-left : 80px;',
			   disabled : true,
			   anchor    : '20%'
			},{
				fieldLabel: 'Type St\351 Invest',
				name: 'Societe__has__investisseur__Type',
				allowBlank:false,
				labelStyle: 'width: 100px;',
				disabled : true,
				width: 200,
				anchor    : '20%'
			},{
				fieldLabel: 'Cat\351gorie',
				name: 'Societe__Categorie__Description',
				allowBlank:false,
				labelStyle: 'width: 170px;',
				disabled : true
			},{
				fieldLabel: 'Tel soci\351t\351',
				name: 'Societe__Telephone',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				fieldLabel: 'Site Web',
				name: 'Societe__SiteWeb',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				fieldLabel: 'Adh\351re',
				name: 'Investisseur__So__Adherent__Libele',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				fieldLabel: 'Adresse Si\350ge soc',
				name: 'Societe__AdresseSiegeSociale',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				fieldLabel: 'Code Postal',
				name: 'Societe__CodePostalSiegeSociale',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				fieldLabel: 'Ville',
				name: 'Societe__VilleSiegeSociale',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				disabled : true
			},{
				xtype: 'textarea',
				fieldLabel: 'Notes',
				name: 'Societe__Commentaire',
				labelStyle: 'width: 170px;',
				allowBlank:false,
				style : {
					width: '136',
				},
				disabled : true
			}],
			listeners: {
				'render': function(){
				//alert('Les données ne sont chargées que sur le render du form');
					this.getForm().load({
						url: 'http://localhost/InnovalisAquitaine_RelationManager/public/societeinvestiseur/generalsocieteinvest/Investisseur__Societe__ID/'+idinvestso
					});
				}
			}
		}),{
			title: 'Suivi Relation',
			layout:'form',
                defaults: {width: 400},
                defaultType: 'textfield',
				items:[
	{			
	xtype:'fieldset',title: '',collapsible: false,autoHeight:true,defaultType: 'textfield',layout:'column',
        items:[
		{columnWidth:.33,layout: 'form',
               	items: [
			{fieldLabel: 'Charge prévisionnelle',xtype:'textfield', width:50,name: 'C_P',value: '0'}
			]
		},
		{columnWidth:.33, layout: 'form',
		items :[
		          {fieldLabel: 'Charge actuelle', xtype:'textfield', width:50,name: 'C_A',value: '0'}
			]
		},
		{columnWidth:.33,layout: 'form',
		items :[
			{fieldLabel: 'Reste à Faire', xtype:'textfield', width:50,name: 'RAF',value: '0'	}
			],
		}
	        ]	
	},
	{			
	xtype:'fieldset',title: '',collapsible: false,autoHeight:true,defaultType: 'textfield',layout:'column',
        items:[
		{columnWidth:.33,layout: 'form',
               	items: [
			{fieldLabel: 'Charge prévisionnelle',xtype:'textfield', width:50,name: 'C_P',value: '0'}
			]
		},
		{columnWidth:.33, layout: 'form',
		items :[
		          {fieldLabel: 'Charge actuelle', xtype:'textfield', width:50,name: 'C_A',value: '0'}
			]
		},
		{columnWidth:.33,layout: 'form',
		items :[
			{fieldLabel: 'Reste à Faire', xtype:'textfield', width:50,name: 'RAF',value: '0'	}
			],
		}
	        ]	
	}
	]	
},{
                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'
                }]
           }]
	});

Merci d'avance,

ninatity · 13/12/2010, 08h25

Bonjour et bienvenue dans le forum.
Peut-tu utiliser la balise [code] pour ton code pour qu'il soit lisible? Merci

Regardes s'il n'y a pas de crochets, d'accolades manquants ou de trop avec notepad par exemple.
Vérifies aussi ton fieldset. A première vue, c'est peut-être sur le dimensionnement qui fait défaut.
Tu utilises les layout:'column', peut-être que ton textfield (width:50) prend la totalité de l'éspace requise?

Bonne continuation.

JulienFio · 13/12/2010, 08h44

Bonjour,

ton code est effectivement bourrés de fautes... Je ne sais pas quel programme tu utilise pour coder mais s'il ne te ressort pas les erreurs de syntaxe je te conseil ce site..

JSLINT

JulienFio · 13/12/2010, 08h59

Ce qu'il y a c'est que d'une part la succession d'item ne se fait pas dans un Panel (oubli de ta pars ?), ensuite aucun renderTo n'est paramétré..

de mon coté, apres avoir corrigé ces deux points et moultes fautes de syntaxe, le code fonctionne

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
new Ext.Panel({
            renderTo: 'divRender',  //le div où tu souhaites afficher ton code Extjs
            items: [{
                    xtype: 'form',
                    title: 'G\351n\351ral',
                    labelAlign:'right',
                    width: 350,
                    height: 400,
                    layout:'form',
                    id: 'patient-form',
                    standardSubmit: true,
                    frame:true,
                    defaultType: 'textfield',
                    items: [{
                            xtype: 'label',
                            fieldLabel: 'Soci\351t\351 Investisseur',
                            id: 'SoInvest',
                            labelStyle: ' width: 170px; color:#0A3E83; font-size: 14px; font-weight: bold'
                        },{
                            fieldLabel: '',
                            name: 'Societe__DenominationSociale',
                            id: 'Societe__DenominationSociale',
                            allowBlank:false,
                            labelStyle: ' width: 0px;',
                            clearCls: 'padding-left : 80px;',
                            disabled : true,
                            anchor : '20%'
                        },{
                            fieldLabel: 'Type St\351 Invest',
                            name: 'Societe__has__investisseur__Type',
                            allowBlank:false,
                            labelStyle: 'width: 100px;',
                            disabled : true,
                            width: 200,
                            anchor : '20%'
                        },{
                            fieldLabel: 'Cat\351gorie',
                            name: 'Societe__Categorie__Description',
                            allowBlank:false,
                            labelStyle: 'width: 170px;',
                            disabled : true
                        },{
                            fieldLabel: 'Tel soci\351t\351',
                            name: 'Societe__Telephone',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Site Web',
                            name: 'Societe__SiteWeb',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Adh\351re',
                            name: 'Investisseur__So__Adherent__Libele',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Adresse Si\350ge soc',
                            name: 'Societe__AdresseSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Code Postal',
                            name: 'Societe__CodePostalSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Ville',
                            name: 'Societe__VilleSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            xtype: 'textarea',
                            fieldLabel: 'Notes',
                            name: 'Societe__Commentaire',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            style : {
                                width: '136'
                            },
                            disabled : true
                        }]
                },{
                    title: 'Suivi Relation',
                    layout:'form',
                    defaults: {width: 400},
                    defaultType: 'textfield',
                    items:[
                        {
                            xtype:'fieldset',title: '',collapsible: false,autoHeight:true,defaultType: 'textfield',layout:'column',
                            items:[
                                {columnWidth:.33,layout: 'form',
                                    items: [
                                        {fieldLabel: 'Charge prévisionnelle',xtype:'textfield', width:50,name: 'C_P',value: '0'}
                                    ]
                                },
                                {columnWidth:.33, layout: 'form',
                                    items :[
                                        {fieldLabel: 'Charge actuelle', xtype:'textfield', width:50,name: 'C_A',value: '0'}
                                    ]
                                },
                                {columnWidth:.33,layout: 'form',
                                    items :[
                                        {fieldLabel: 'Reste à Faire', xtype:'textfield', width:50,name: 'RAF',value: '0' }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype:'fieldset',title: '',collapsible: false,autoHeight:true,defaultType: 'textfield',layout:'column',
                            items:[
                                {columnWidth:.33,layout: 'form',
                                    items: [
                                        {fieldLabel: 'Charge prévisionnelle',xtype:'textfield', width:50,name: 'C_P',value: '0'}
                                    ]
                                },
                                {columnWidth:.33, layout: 'form',
                                    items :[
                                        {fieldLabel: 'Charge actuelle', xtype:'textfield', width:50,name: 'C_A',value: '0'}
                                    ]
                                },
                                {columnWidth:.33,layout: 'form',
                                    items :[
                                        {fieldLabel: 'Reste à Faire', xtype:'textfield', width:50,name: 'RAF',value: '0' }
                                    ]
                                }
                            ]
                        }
                    ]
                },{
                    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'
                        }]
                }]
        });

ninatity · 13/12/2010, 10h02

JulienFio>
J'ai recopié ton code et est-ce que les labels "Charge prévisionnelle", "Charge actuelle", ... s'affiche pour toi dans le fieldset "Suivi relation"?

JulienFio · 13/12/2010, 11h41

Non effectivement,
j'ai cru qu'il s'agissait d'un problème d'affichage des fieldset.
Comme ça cela devrait être mieux:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
new Ext.Panel({
            renderTo: 'accueilExt',  //le div où tu souhaites afficher ton code Extjs
            items: [{
                    xtype: 'form',
                    title: 'G\351n\351ral',
                    labelAlign:'right',
                    width: 350,
                    height: 400,
                    layout:'form',
                    id: 'patient-form',
                    standardSubmit: true,
                    frame:true,
                    defaultType: 'textfield',
                    items: [{
                            xtype: 'label',
                            fieldLabel: 'Soci\351t\351 Investisseur',
                            id: 'SoInvest',
                            labelStyle: ' width: 170px; color:#0A3E83; font-size: 14px; font-weight: bold'
                        },{
                            fieldLabel: '',
                            name: 'Societe__DenominationSociale',
                            id: 'Societe__DenominationSociale',
                            allowBlank:false,
                            labelStyle: ' width: 0px;',
                            clearCls: 'padding-left : 80px;',
                            disabled : true,
                            anchor : '20%'
                        },{
                            fieldLabel: 'Type St\351 Invest',
                            name: 'Societe__has__investisseur__Type',
                            allowBlank:false,
                            labelStyle: 'width: 100px;',
                            disabled : true,
                            width: 200,
                            anchor : '20%'
                        },{
                            fieldLabel: 'Cat\351gorie',
                            name: 'Societe__Categorie__Description',
                            allowBlank:false,
                            labelStyle: 'width: 170px;',
                            disabled : true
                        },{
                            fieldLabel: 'Tel soci\351t\351',
                            name: 'Societe__Telephone',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Site Web',
                            name: 'Societe__SiteWeb',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Adh\351re',
                            name: 'Investisseur__So__Adherent__Libele',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Adresse Si\350ge soc',
                            name: 'Societe__AdresseSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Code Postal',
                            name: 'Societe__CodePostalSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            fieldLabel: 'Ville',
                            name: 'Societe__VilleSiegeSociale',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            disabled : true
                        },{
                            xtype: 'textarea',
                            fieldLabel: 'Notes',
                            name: 'Societe__Commentaire',
                            labelStyle: 'width: 170px;',
                            allowBlank:false,
                            style : {
                                width: '136'
                            },
                            disabled : true
                        }]
                },{
                    title: 'Suivi Relation',
                    layout:'column',
                    defaults:{
                            columnWidth:0.33
                            ,layout:'form'
                            ,border:false
                            ,xtype:'panel'
                        },
                    items:[{
                            items:[{
                                    xtype:'textfield', fieldLabel: 'Charge prévisionnelle',name: 'C_P',value: '0'
                                },{
                                   xtype:'textfield', fieldLabel: 'Charge prévisionnelle', name: 'C_P',value: '0'
                                }]
                        },{
                            items:[{
                                    xtype:'textfield', fieldLabel: 'Charge actuelle',name: 'C_A',value: '0'
                                },{
                                   xtype:'textfield', fieldLabel: 'Charge actuelle', name: 'C_A',value: '0'
                                }]
                        },{
                            items:[{
                                    xtype:'textfield', fieldLabel: 'Reste à Faire',name: 'RAF',value: '0'
                                },{
                                   xtype:'textfield', fieldLabel: 'Reste à Faire',name: 'RAF',value: '0'
                                }]
                        }]
                },{
                    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'
                        }]
                }]
        });

Pour des exemples de layout de form : Saki's examples
ou même ici Exemples Extjs

cecilia9 · 13/12/2010, 12h39

Merci, j'ai réussi à résoudre mon problème.

Bonne journée

ninatity · 13/12/2010, 13h13

Ok tu peux alors cliquer sur le bouton

Bonne continuation

13/12/2010, 08h25	#2
ninatity Membre du Club Développeur informatique Inscription : octobre 2010 Messages : 62 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : Madagascar Informations professionnelles : Activité : Développeur informatique Secteur : Distribution Informations forums : Inscription : octobre 2010 Messages : 62 Points : 54 Points : 54	Salut utilises les balises Bonjour et bienvenue dans le forum. Peut-tu utiliser la balise [code] pour ton code pour qu'il soit lisible? Merci Regardes s'il n'y a pas de crochets, d'accolades manquants ou de trop avec notepad par exemple. Vérifies aussi ton fieldset. A première vue, c'est peut-être sur le dimensionnement qui fait défaut. Tu utilises les layout:'column', peut-être que ton textfield (width:50) prend la totalité de l'éspace requise? Bonne continuation.
	00

13/12/2010, 08h44	#3
JulienFio Membre éclairé Julien Fiorentino Inscription : novembre 2007 Messages : 201 Détails du profil Informations personnelles : Nom : Julien Fiorentino Âge : 28 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : novembre 2007 Messages : 201 Points : 336 Points : 336	Bonjour, ton code est effectivement bourrés de fautes... Je ne sais pas quel programme tu utilise pour coder mais s'il ne te ressort pas les erreurs de syntaxe je te conseil ce site.. JSLINT
	00

13/12/2010, 10h02	#5
ninatity Membre du Club Développeur informatique Inscription : octobre 2010 Messages : 62 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : Madagascar Informations professionnelles : Activité : Développeur informatique Secteur : Distribution Informations forums : Inscription : octobre 2010 Messages : 62 Points : 54 Points : 54	JulienFio> J'ai recopié ton code et est-ce que les labels "Charge prévisionnelle", "Charge actuelle", ... s'affiche pour toi dans le fieldset "Suivi relation"?
	00

13/12/2010, 12h39	#7
cecilia9 Invité de passage Inscription : décembre 2010 Messages : 4 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 4 Points : 1 Points : 1	Merci, j'ai réussi à résoudre mon problème. Bonne journée
	00

13/12/2010, 13h13	#8
ninatity Membre du Club Développeur informatique Inscription : octobre 2010 Messages : 62 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : Madagascar Informations professionnelles : Activité : Développeur informatique Secteur : Distribution Informations forums : Inscription : octobre 2010 Messages : 62 Points : 54 Points : 54	Ok tu peux alors cliquer sur le bouton Bonne continuation
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email