Discussion :

[Didi49]

Bonjour,

j'ai récemment été mis en charge de mettre à jours un composant Joomla, qui utilise le framework ExtJs de Sencha. J'ai développé mon application et lors de son intégration au composant déjà existant j'ai eu plusieurs problèmes.
La plupart ont été résolus en uploadant la version 4.1.0 de ExtJs (avant c'était la 4.0.X (je ne connais pas le nom de cette version exactement).

Lorsque j'ai mis à jour la librairie donc, tout marchait bien jusqu'à ce que j'arrive à l'édition d'un article (toujours sous Joomla). L'application utilise Mootools pour détecter les évènements qui déclencheront l'enregistrement de l'article (enfin c'est ce que je pense avoir compris en ayant lu le code dans le composant com_content). Le message d'erreur que je reçoit est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

TypeError: Property 'id' of object #<HTMLDocument> is not a function

Mootools récupère le formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	Joomla.submitbutton = function(task) {
		if (task == 'article.cancel' || document.formvalidator.isValid(document.id('item-form'))) {
Uncaught TypeError: Property 'id' of object #<HTMLDocument> is not a function
			if (tinyMCE.get("jform_articletext").isHidden()) {tinyMCE.get("jform_articletext").show()}; tinyMCE.get("jform_articletext").save();			Joomla.submitform(task, document.getElementById('item-form'));
		} else {
			alert('Formulaire invalide');
		}
	}
</script>

Ceci est le code du composant com_content, écrit par Joomla et je ne pense pas qu'il fasse y toucher. Le problème se passe au moment de la récupération du formulaire : document.id('item-form')).

Un plugin est installé en même temps que le composant sur lequel j'interviens qui permet de rajouter un bouton dans la page d'édition des articles et qui fait apparaître une fenêtre créée à partir de ExtJs. Bref cette librairie est chargée au chargement de cette page. J'ai fait plusieurs tests : j'ai enlevé le code javascript qui faisait appel à ExtJs sans enlever la librairie, ça ne marche toujours pas. Lorsque j'enlève tout (le code ExtJs et la librairie), je récupère la possibilité d'enregistrer.

Tout le long du développement de mon application sur Joomla, j'ai eu ce genre de message d'erreur mais ça n'a jamais perturbé le fonctionnement. Jusque là ...

J’espère pouvoir trouver de l'aide et, pour ça, avoir été clair.
Merci

[vermine]

Bonjour,

Il est toujours déconseillé de mélanger les frameworks. Oui je sais, ce n'est pas de votre fait.

Apparemment il essaie de retrouver document.id dans les sources ExtJS sans chercher dans les sources MooTools. Plutôt étrange.

Je proposerais bien de passer par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('item-form')

Mais à mon avis le résultat sera le même. Il y a peut-être un redéfinition des méthodes MooTools quelque part ou bien c'est le <HTMLDocument> qui pose problème.

Au pire, essayez la méthode JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('item-form')

Et finalement, mais je crains que ça ne fasse pas ce que l'on pense :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Ext.get('item-form')

[vermine]

Euh, oui. Ce qui ne vous arrange pas.

Ceci est le code du composant com_content, écrit par Joomla et je ne pense pas qu'il fasse y toucher.

Mieux vaut pas. On est d'accord. Mais alors je ne sais pas trop comment régler le problème. Inverser l'appel des bibliothèques ? Il y a un point de Faq qui parle de ça, mais pas sûr que ça concerne MooTools...

Puis-je utiliser Ext-JS si j'ai inclus une autre bibliothèque ?

[Didi49]

Bonjour,
merci pour votre réponse.

Je ne sais pas si changer le code du composant écrit par Joomla soit une bonne idée. C'est écrit par Joomla justement
Quoi qu'il en soit j'ai essayé vos solutions et mon message d'erreur a changé et est le même pour les trois méthodes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Uncaught TypeError: Cannot call method 'isValid' of null

L'erreur se déclenche exactement au même endroit. Il reconnait apparemment la fonction mais ne trouve pas l'élément.

[Didi49]

J'ai essayé de changer l'ordre d'appel au bibliothèque. Le soucis est que Mootools est appelé par Joomla de base donc l'ajout de ExtJs se fait tout le temps après. J'ai tout de même essayé de rapeller Mootools après l'appel de ExtJs (pas très propre mais bon, je test ) et le problème reste le même.

[vermine]

Avez-vous bien un élément 'item-form' et celui-ci est-il unique ?

[Didi49]

Oui,
j'ai bien recherché. Cet élément est aussi créé par le composant com_content.
En fait, le code initial fonctionne (même après l'installation de l'ancien plugin, et donc de l'ancienne librairie). Après l'ajout de la nouvelle version de la librairie ExtJs, ça bloque.

[Didi49]

J'ai aussi essayé l'adaptateur mootools pour ExtJs (http://www.joomlicious.com/ext-mootools-adapter/).
Le message d'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

TypeError: Property 'id' of object #<HTMLDocument> is not a function

est toujours là.

[kenny.kev]

Après quelque recherche, j'ai bien l'impression qu'avec la version 4.x extjs ne gère plus la compatibilité avec les autres librairies.

En revanche dans la version 3.x c'est le cas. regarde peut être de ce coté