[Debutant]Integrer l'affichage d'un Component dans une fonction

Version imprimable

Bonjour,
Je dois afficher un clavier virtuel lorsque je clique sur un bouton , hors je ne sais pas comment l'afficher, en effet je viens de télécharger un plugin s'appelant virtualKeyboard , mais il n'y a pas de fonction d'affichage dans celui-ci.
Je sais que VirtualKeyboard hérite de component.
Voici le Code , et merci pour votre aide
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 ajout: function() { Ext.MessageBox.OKCANCEL = { ok : 'Ok', cancel : 'Annuler' } ; var Clavier = new Ext.ux.VirtualKeyboard({ Languages : 'french' }); Ext.Msg.prompt(TITRE_SAVE_CONTEXT, TEXT_SAVE_CONTEXT, function(btn, text){ if (btn == 'ok'){ if(text==""){ Ext.MessageBox.show({ title: 'Erreur sur création', msg: 'Le nom doit être non vide', buttons: Ext.MessageBox.OK }); } else{ Contextejs.sendAjaxAjout(text) ; } } }); },

03/06/2010, 15h12
Mako 5013
Bonjour,

A l'endroit où tu veux faire afficher ton clavier virtuel, tu fais un
Code:

1 2 Clavier.show();
Mako
03/06/2010, 15h25
jeremie64

Merci pour ton aide, mais cela ne s'affiche pas

Je le met juste après le new

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
ajout: function() {
		Ext.MessageBox.OKCANCEL = {
      ok : 'Ok',
      cancel : 'Annuler'
		} ;
		var Clavier = new Ext.ux.VirtualKeyboard({
		Languages : 'french'
		});
		Clavier.show();
		Ext.Msg.prompt(TITRE_SAVE_CONTEXT, TEXT_SAVE_CONTEXT, function(btn, text){
    	if (btn == 'ok'){
    		if(text==""){
				  Ext.MessageBox.show({
			       title: 'Erreur sur création',
			       msg: 'Le nom doit être non vide',
			       buttons: Ext.MessageBox.OK
				  });
    		}
    		else{
    			Contextejs.sendAjaxAjout(text) ;
    		}
    	}
		});
	},

03/06/2010, 15h40
Mako 5013
Ok, oublie le
Code:

1 2 Clavier.show();
et essaye plutôt quelque chose dans le genre
Code:

1 2 3 4 5 var Clavier = new Ext.ux.VirtualKeyboard({ Languages : 'french', renderTo: 'myDiv' });
avec 'myDiv' qui est l'id d'une div html que tu auras placé dans le code de ta page. Si jamais cela ne fonctionne pas non plus, essaye de l'inclure dans un panel, comme c'est fait sur la page de démo.

Mako

La Deuxième méthode me crée une erreur:
this.keyboardTarget is null
error source line: [Break on this error] this.keyboardTarget.el.on('click', this.IESel, this);
Ext.ux.VirtualKeyboard.js(ligne 290)

je l'ai rajouter dans index.php

Code:

<div id="test"></div>

et sinon pour Ext.ux.VirtualKeyboard.js(ligne 290) voici le code

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
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
initKeyboard : function(ct){
		this.keyboardTarget.el.on('click', this.IESel, this);
		this.keyboardTarget.el.on('keyup', this.IESel, this);
		this.keyboardTarget.el.on('select', this.IESel, this);
 
		this.keyboard = ct.createChild({
			tag: 'div',
			cls: 'x-keyboard x-panel'
		});
 
		this.keyboard.setStyle({width: this.width || 370});
 
		var layouts = 0;
		for (lang in this.Languages) if (typeof this.Languages[lang] == "object") layouts++;
 
		var dh = Ext.DomHelper;
 
		var ktbarItems = [];
 
		if (this.languageSelection) {
 
			var values = [];
			for (ktype in this.Languages) {
				if (typeof this.Languages[ktype] == "object") {
					values.push([ktype, ktype]);
				}
			}
 
			this.languageSelector = new Ext.form.ComboBox({
				store: values,
				forceSelection: true,
				triggerAction: 'all',
				editable: false,
				readOnly: true,
				height: 15,
				width: 100,
				value: this.language,
				listeners: {
					'select': function(combo, record) {
						this.language = record.data.value;
						this.buildKeys();
					},
					expand: function(){
						this.selectingLanguage = true;
					},
					collapse: function(){
						this.selectingLanguage = false;
					},
					scope: this
				}
			});
			ktbarItems.push(this.languageSelector);
		}
		else{
			ktbarItems.push(this.language);
		}
		ktbarItems.push('-', {
			text: this.deadKeysButtonText,
			//tooltip: this.deadKeysButtonTip,
			enableToggle: true,
			listeners: {
				toggle: function(btn, pressed){
					this.deadKeysOn = pressed;
					this.keyModify("");
				},
				scope: this
			}
		});
 
		this.ktbar = new Ext.Toolbar({
			renderTo: this.keyboard,
			items: ktbarItems
		});
 
		if (!this.languageSelection){
			Ext.fly(this.ktbar.items.items[0].getEl()).setStyle({fontWeight: 'bold'});
		}
 
		var wrap = this.keyboard.createChild({
			tag: 'div',
			cls: 'x-panel-bwrap'
		});
 
		var mc = wrap.createChild({
			tag: 'div',
			cls: 'x-panel-body'
		});
 
		this.keysContainer = mc.createChild({
			tag: 'div'
		});
 
		this.buildKeys();
	},

En tout cas merci pour ton aide