composant ext Toolbar

**DiverSIG** · 25/02/2011, 10h34

Bonjour,

je veux définir un composant toolbar pour mon application :

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
Ext.onReady(function() {
	Ext.ns('Marel');
	Marel.toolbar = Ext.extend(Ext.Toolbar, {
				width:800,
				cls:'menuitem',
				items: [{
					xtype: 'tbbutton',
					text: 'Accueil',
					icon: 'img/home.png'
					},
					' ','-',' ',
					{
					xtype: 'tbbutton',
					text: 'MAREL',
					icon: 'img/view.png'
					},
					' ','-',' ',
					{
					xtype: 'tbbutton',
					text: 'Accès aux données',
					menu: [{
						text: 'Visualiser',
						icon: 'img/graphe.png'
						},{
						text: 'Télécharger',
						icon: 'img/download.png'
						}]
					},
					' ','-',' ',
					{
					xtype: 'tbbutton',
					text: 'Contact',
					icon: 'img/contact_email.png'
					},
					' ','-',' ',
					{
					id:'menuConnect',
					xtype: 'tbbutton',
					text: 'Se connecter',
					icon: 'img/connect.png'
					},
					'->',
					{
					xtype: 'tbbutton',
					text: 'Mentions légales',
					icon: 'img/rosette.png'
					}
				],
				initComponent : function() {
					Marel.toolbar.superclass.initComponent.apply(this, arguments);
				}
 
	});	// fin Marel.toolbar = Ext.extend(Ext.Toolbar
 
	Ext.reg('toolbar', Marel.toolbar);
});

dans le fichier appli.js, dans lequel j'initialise mon application, j'ai :

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
Ext.BLANK_IMAGE_URL = './lib/ext-3.3.1/resources/images/default/s.gif';
Ext.ns('Marel');
 
 
Marel.app = function() {
 
	// variables privées
 
	// fonctions privées
 
	// public
	return {
	init: function() {
 
		var vp = new Ext.Viewport({
					layout: 'border',
					renderTo: Ext.getBody(),
					items: [{
						region: 'north',
						bodyStyle: 'padding:10px',
						height: 170,
						items: [new Marel.toolbar()] //enTete
						},
						{
						region: 'center',
						bodyStyle: 'padding:10px'
						},
						{
						region: 'south',
						bodyStyle: 'padding:10px',
						height: 100
						}]
		});
 
 
 
	}	// fin init
	};	// fin return
 
 
}();	// fin Marel.app = function()
 
Ext.onReady(Marel.app.init, Marel.app);