Discussion :

[cecilia9]

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]

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]

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]

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]

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]

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]

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

Bonne journée