Mootools and ExtJs 4.x seem to be incompatible, how to solve?

Question

Mootools and ExtJs have a compatibility issue when used on the same page. Mootools throws the following error :

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

How can we use both frameworks side by side ? Is there a workaround ?

Annunciation

Nice you got it working! +1 for unusual question – Richart

what is the reason to use both on the same page? Seems like an overkill, no? – Savagism

@Savagism I try to upgrade an application that was written using a legacy framework ( jxlib, based on mootools ) in place and step by step. This involves rewriting all javascript, and I hope to be able to leave a part of the app as it is. – Annunciation

Answer 1

This looks like a document.id('..') reference issue, it is defined but it's not the mootools method...

Nothing will work if it's not pointed to the mootools method.

I would argue that ExtJS or your app has added a property id to document, which is not a function as is likely a String or another primitive.

Pretty sure that ExtJS would not have been overwriting document.id, especially given that they (Sencha) employed MooTools core team dev @subtlegradient (thomas aylott) who co-wrote the Slick selector engine and helped engineer the document.id transition in MooTools from the simple $ in 1.11

You probably cannot do document.id = $ to restore it as it's by reference and it's been overwritten.

Only chance is to try loading MooTools after ExtJS is loaded and started - or load MooTools, save a ref like document.$id = document.id; immediately after, load ExtJS and then restore it back when ready via document.id = document.$id; delete document.$id - still no guarantees this will run at the right time. you really need to see what modifies your document object in web inspector (you can add a watcher)

Fluffy