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à.

[vermine]

Même avec la version document.getElementById ?

[Didi49]

Avec l'adaptateur, vos solutions proposées me donne la même erreur que sans l'adaptateur soit :

Code :

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

Uncaught TypeError: Cannot call method 'isValid' of null

.
Je ne comprend vraiment pas d'où ça provient ...

[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é

[Didi49]

Je n'ai pas trouvé cette information malgré mes recherches et elle m'ennuie beaucoup.
Est-ce que vous avez une idée de la méthode ExtJs qui bloque celle de Mootools? Je ne sais pas si ça marcherait mais si je surcharge cette méthode en y appelant celle de Mootools peut être que le problème sera "résolu" ...
Qu'en pensez vous?

[kenny.kev]

c'est compatible pour la v3 : http://www.joomlicious.com/ext-mootools-adapter/
à tester.

Mais c'est soit vous abandonner extjs, soit vous passé en v3 de extjs.
Car le problème viens des 2, ils utilisent les même noms.

[Didi49]

merci pour vos réponses.
Je vais voir pour éviter ExtJs dans la partie qui plante.

[sekaijin]

c'est effectivement un problème.

mootools lorsqu'il se charge ajoute des fonctions directement dans le DOM

sur l'élément HTMLDocument il ajoute la méthode id qui est une méthode semblable à getElementById mais qui optimise le traitement.

Extjs lui lorsqu'il se charge ajoute un id à tous les éléments du DOM qui n'en n'ont pas (il le fait systématiquement pour l'objet document et l'objet windows) Il remplace donc l'attribut id de l'élément HTML par le sien "ext-document".

id ne référence donc plus la méthode de mootools.
lorsque tu arrive à ton étape. mootools tente d'exécuter document.id et te dit que <HTMLDocument>.id n'est pas une fonction.

Je trouve mootools gonflé d'utiliser un attribut standard pour y placer une référence à une fonction.

Et Ext aussi de ne pas vérifier

une solution à tester

avant de charger Ext récupérer la valeur de document.id

Code html :

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

<script>MOOTOOLS_DOCUMENT_ID_VALUE = document.id</script>

charger Extjs

Code html :

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

<script src="ext.js"></script>

restaurer la valeur mootools et renseigner Extjs

Code html :

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

1
2
<script>Ext.documentId=MOOTOOLS_DOCUMENT_ID_VALUE;
document.id=Ext.documentId</script>

ainsi mootools retrouve sa fonction

Extjs de son coté utilise

Ext.documentId comme référence pour reconnaitre l'objet document ainsi dans la méthode Ext.get

Code :

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

(el == Ext.documentId)

je pense que ce devrait être suffisant

autre solution: il me semble que Ext place les id sur les objet du DOM après que le navigateur ait chargé tout le DOM
en donnant comme id à utiliser sur le dom document.id il replacera la méthode mootools

Code html :

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

1
2
<script src="ext.js"></script>
<script>Ext.documentId=document.id</script>

A+JYT

[Didi49]

ouah ! merci
ça marche parfaitement !
Merci pour l'explication aussi !

[sekaijin]

De rien
A+JYT