Divers boutons de menu

Version imprimable

Bonjour!

Je suis débutante en ExtJS et je cherche a rendre fonctionnel les boutons d'un menu que voici :

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
 
CreateTopPanel: function() {
 
        var config = {
            border: false
			, layout: { type: 'hbox', align: 'stretch' }
            , id : 'menu'
            //, flex: 1
			, xtype: 'toolbar'
			,items: [
				{
					xtype: 'button',
					id: 'deconnexion',
					text: '',
					cls: 'butonClasse',
					handler: function(){
						alert("deconnexion");
					}
				},
				{
					xtype: 'button',
					id: 'print',
					text: '',
					cls: 'butonClasse',
					handler: function(){
						alert("Impression");
					}
				},
				{
					xtype: 'button',
					id: 'sendMail',
					text: '✉',
					cls: 'butonClasse',
					handler: function(){
						alert("Envoyer un Mail");
					}
				},
				{
					xtype: 'button',
					id: 'share',
					text: '',
					cls: 'butonClasse',
					handler: function(){
						alert("Partager");
					}
				},
				{
					xtype: 'button',
					id: 'addFavorites',
					text: '★',
					cls: 'butonClasse',
					handler: function(){
						alert("Ajouter aux favoris");
					}
				}
			]
        };
        //config.items = items;
 
        return Ext.create('widget.panel', config);
    }

Comme vous pouvez le voir, pour l'instant je ne fais que des alert (car je ne sais faire que ça). Je voudrais savoir si vous aviez des scripts qui me permettraient de faire les actions suivantes :
- Lancer une impression écran
- Ajouter une div dans le dom et l'ouvrir façon show de jQuery
- Envoyer un mail via une adresse saisie
- Ajouter la page à mes favoris

Merci d'avance pour vos pistes! :D

23/05/2013, 00h08
abraxis

Bonsoir,

Rien n'empêche d'utiliser jQuery avec ExtJS ;)
Il existe plusieurs sites qui proposent des plug-in pour divers actions.
23/05/2013, 08h41
Bovino

Citation:

- Lancer une impression écran

Non, cela n'est pas possible en JavaScript (ExtJS et jQuery ne sont que du JavaScript).

Citation:

- Ajouter une div dans le dom et l'ouvrir façon show de jQuery

Oui, c'est faisable (sans être obligé de passer par jQuery : inutile d'ajouter un framework pour ça...), voir Ext.fx.Anim View.

Citation:

- Envoyer un mail via une adresse saisie

Il est uniquement possible en JavaScript d'ouvrir le logiciel de messagerie, pas d'envoyer un mail.

Citation:

- Ajouter la page à mes favoris

C'est possible, mais pas de façon cross-browser...

je te conseille de regarder de près les examples de sencha
plus précisément celui-ci toolbar menu et surtout action menu

passer par une action permet de séparer le design du fonctionnel
une même action pouvant être activé par plusieurs widget différents

pour ce qui est d'ajouter des élement dans le DOm rien de plus simple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [     // may also specify 'cn' instead of 'children'
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};
var list = dh.append(
    'my-div', // the context element 'my-div' can either be the id or the actual node
    spec      // the specification object
);

la doc est dans DomHelper

mais mieux que des élément du DOM extjs te permet d'ajouter n'importe quel composants (conteneur, vue, form etc)
pour les adeptes des templates
xtemplate (tres comples mais un peu lourd) ou template (plus léger mais moins complet) permet d'afficher des données formatés dans n'omporte quel endroit du DOM

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = {
    name: 'Don Griffin',
    title: 'Senior Technomage',
    company: 'Sencha Inc.',
    drinks: ['Coffee', 'Water', 'More Coffee'],
    kids: [
        { name: 'Aubrey',  age: 17 },
        { name: 'Joshua',  age: 13 },
        { name: 'Cale',    age: 10 },
        { name: 'Nikol',   age: 5 },
        { name: 'Solomon', age: 0 }
    ]
};

Code:

1
2
3
4
5
6
7
8
9
10
var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);  // pass the root node of the data object

la encore la doc est très complète.

A+JYT