Modifier un titre dans un layout dynamiquement

Version imprimable

14/03/2012, 12h16
edblv

Modifier un titre dans un layout dynamiquement

Bonjour,
Je me lance avec ExtJs 4 après une longue hésitation (j'ai longtemps utilisé DhtmlX).
Mon premier problème est le suivant :
J'ai fait un Layout avec des titres par défaut sur les différentes zones et j'aimerais pouvoir modifier ces titres dynamiquement sur un évènement quelconque (clic sur un bouton ou autre).

Comment faut-il s'y prendre ?
Merci d'avance.
15/03/2012, 00h13
abraxis

Bonsoir,

Tu peux utiliser la méthode

Code:

panel.setTitle('mon nouveau titre');

pour changer le titre sur un event.

Citation:

Envoyé par abraxis

Bonsoir,

Tu peux utiliser la méthode

Code:

panel.setTitle('mon nouveau titre');

pour changer le titre sur un event.

Désolé, je ne vois pas, alors voici mon code.
L'idée c'est que une fois que l'utilisateur s'est identifié, je charge les libellés dans sa langue et je modifie les titres des différentes régions du layout.

Donc ma question est : comment accéder à ces éléments ?

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
 
Ext.require(['*']);
Ext.onReady(function() {
	var cw;
 
	Ext.create('Ext.Viewport', {
		layout: {
			type: 'border',
			padding: 3
		},
		defaults: {
			split: true
		},
		items: [Ext.create('Ext.Component', {
			region: 'north',
			height: 25, // give north and south regions a height
			contentEl: 'MenuDeroulant'
		}),{
			region: 'west',
			layout: 'border',
			collapsible: true,
			title: 'Utilisateur',
			width: '12%',
			border: false,
			items: [{
				region: 'center',
				//html: 'Connexion...',
				contentEl: 'BlocConnexion',
				title: 'Connexion',
				collapsible: true,
				minHeight: 80
			},{
				region: 'south',
				height: 250,
				split: true,
				collapsible: true,
				title: 'Splitter above me',
				minHeight: 60,
				contentEl: 'BlocFavoris'
			//html: 'center south'
			}]
		},{
			region: 'center',
			collapsible: false,
			title: 'Tableau de bord...',
			split: true,
			minWidth: 100,
			minHeight: 140,
			contentEl: 'BlocCentre'
		//html: 'Center<br>I am floatable'
		},{
			region: 'east',
			collapsible: true,
			floatable: true,
			split: true,
			width: 200,
			minWidth: 120,
			minHeight: 140,
			title: 'East',
			contentEl: 'BlocDroit'
		},
		Ext.create('Ext.Component', {
			region: 'south',
			height: 20, // give north and south regions a height
			contentEl: 'BarreStatus'
		})
		]
	});
});

tu peux faire un Ext.getCmp() sur le viewport et ensuite utiliser cette référence au viewport pour obtenir tous les champs inférieur.
Code:

1 2 3 4 5 //Ajouter un attribut id: 'myViewport' à ton objet viewport var myViewport = Ext.getCmp('myViewport'); //Ajouter un attribut name: 'champ1' au item dont tu souhaites modifier le text ou bien le title myViewport.down('[name=champ1]').setTitle('titleChamp1');
Je te conseille de faire un tour sur la documentation ext-js elle est complète.

Citation:
Envoyé par chaya
tu peux faire un Ext.getCmp() sur le viewport et ensuite utiliser cette référence au viewport pour obtenir tous les champs inférieur.
Code:

1 2 3 4 5 //Ajouter un attribut id: 'myViewport' à ton objet viewport var myViewport = Ext.getCmp('myViewport'); //Ajouter un attribut name: 'champ1' au item dont tu souhaites modifier le text ou bien le title myViewport.down('[name=champ1]').setTitle('titleChamp1');
Je te conseille de faire un tour sur la documentation ext-js elle est complète.
Génial ! C'est exactement ce que je cherchais, merci beaucoup.
La doc est effectivement assez complète, mais je pense qu'une formation me fera gagner beaucoup de temps.
ExtJs c'est quasiment un nouveau langage...