Discussion :

[nikko49]

Bonsoir,

J'ai besoin que mon application ExtJs soit compatible sur la majorité des navigateurs (avec leur différentes versions).
Mon problème survient donc surtout lors des tests sur Internet Explorer version 6, 7, 8 & 9 (La compatibilité de ExtJs étant la suivante d'après le site :

Ext JS supports all major web browsers including:

Internet Explorer 6+
Firefox 3.6+ (PC, Mac)
Safari 4+
Chrome 10+
Opera 11+ (PC, Mac) )

En effet, comme stipulé dans le titre, lors de l'exécution sur IE 9-, dans la console de navigation j'obtiens l'erreur suivante :

Code :

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

1
2
SCRIPT5007 : unable to get property 'mouseover' of undefined or null reference
ext-all-dev.js line 16619

La fonction faisant référence à cette ligne dans ce fichier est la suivante :

Code :

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

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
addListener: function(element, eventName, fn, scope, options) {
		// Check if we've been passed a "config style" event.
		if (typeof eventName !== 'string') {
			EventManager.prepareListenerConfig(element, eventName);
			return;
		}

		var dom = element.dom || Ext.getDom(element),
			hasAddEventListener, bind, wrap, cache, id, cacheItem, capture;
		
		if (typeof fn === 'string') {
			fn = Ext.resolveMethod(fn, scope || element);
		}

		if (!fn) {
			Ext.Error.raise({
				sourceClass: 'Ext.EventManager',
				sourceMethod: 'addListener',
				targetElement: element,
				eventName: eventName,
				msg: 'Error adding "' + eventName + '\" listener. The handler function is undefined.'
			});
		}
			// create the wrapper function
		options = options || {};

		bind = EventManager.normalizeEvent(eventName, fn);
		wrap = EventManager.createListenerWrap(dom, eventName, bind.fn, scope, options);
				
		// add all required data into the event cache
		cache = EventManager.getEventListenerCache(element.dom ? element : dom, eventName);
		eventName = bind.eventName;

		// In IE9 we prefer to use attachEvent but it's not available for some Elements (SVG)
		hasAddEventListener = supportsAddEventListener || (Ext.isIE9 && !dom.attachEvent);
				
		if (!hasAddEventListener) {
			id = EventManager.normalizeId(dom);
			// If there's no id we don't have any events bound, so we never
			// need to clone at this point.
			if (id) {
				cacheItem = Ext.cache[id][eventName];
				if (cacheItem && cacheItem.firing) {
					// If we're in the middle of firing we want to update the class
					// cache reference so it is different to the array we referenced
					// when we started firing the event. Though this is a more difficult
					// way of not mutating the collection while firing, a vast majority of
					// the time we won't be adding listeners for the same element/event type
					// while firing the same event.
							cache = EventManager.cloneEventListenerCache(dom, eventName);
				}
			}
		}

		capture = !!options.capture;
		cache.push({
			fn: fn,
			wrap: wrap,
			scope: scope,
			capture: capture 
		});

		if (!hasAddEventListener) {
			// If cache length is 1, it means we're binding the first event
			// for this element for this type
			if (cache.length === 1) {
				id = EventManager.normalizeId(dom, true);
				fn = Ext.Function.bind(EventManager.handleSingleEvent, EventManager, [id, eventName], true);
				Ext.cache[id][eventName] = {
					firing: false,
					fn: fn
				};
				dom.attachEvent('on' + eventName, fn);
			}
		} else {
			dom.addEventListener(eventName, wrap, capture);
		}
			if (dom == doc && eventName == 'mousedown') {
			EventManager.stoppedMouseDownEvent.addListener(wrap);
	}
},

La ligne posant problème est en rouge.
Afin d'essayer que mon application s'éxécute jusqu'au bout, j'ai rajouté cette condition pour que sur les événément "à problème", on ne passe pas dans la fonction.
J'ai donc ajouté en début de fonction :

Code :

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

if (eventName != 'mouseover' && eventName != 'mouseout' && eventName != 'mousemove' && eventName != 'keydown' && eventName != 'mouseup')

Du coup, tout s'éxécute et je n'ai plus d'erreur, mais comme je m'en doutais un peu, le drag & Drop notamment ne fonctionne plus (ce qui parait plutot logique )

Ma question est donc : comment résoud on ce problème "d'évènement" tout en conservant un fonctionnement correct ?

PS : La version d'ExtJs que j'utilise est la version ExtJs 4.2.1

Merci beaucoup d'avance

[nikko49]

Après de bonnes heures de recherches, j'ai l'impression que l'erreur survient à cause de la cohabitation Mootools / ExtJs.

Pour tester tout cela, je suis reparti d'une application vierge.
Avec une première page : app.js (Contenant mon application ExtJs)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ext.application
({
    name: 'HelloExt',
    launch: function() 
    {
        Ext.create('Ext.container.Container', 
        {
            layout: 'anchor',
            renderTo: Ext.getBody(),
 
            items: [
                {
                    title: 'Hello Ext',
                    html : 'This is to test Ext JS.'
                }
            ]
        });
    }
});

Et une deuxième page : index.html (Page de départ avec les différentes inclusions)

Code :

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

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
<html>
<head>
    <title>Hello World</title>
 
    <!-- STYLES -->
    <link rel="stylesheet" type="text/css" href="ext-all.css">
 
    <!-- LIBS -->    
    <script type="text/javascript" src="mootools-core.js"></script>
	<script type="text/javascript" src="mootools-more.js"></script>
	
	<script>MOOTOOLS_DOCUMENT_ID_VALUE = document.id;</script>
	
	<script type="text/javascript" src="jquery.min.js"></script>	
	<script type="text/javascript" src="ext-all-dev.js"></script>
	
	<script>
		Ext.documentId = MOOTOOLS_DOCUMENT_ID_VALUE;
		document.id = Ext.documentId;
	</script>
 
    <!-- APP -->
    <script type="text/javascript" src="app.js"></script>
 
</head>
<body></body>
</html>

Les lignes en orange servent à résoudre un premier conflit : http://www.developpez.net/forums/d12...otools-joomla/

On peut s'apercevoir alors qu'en supprimant l'inclusion Mootools anisi que le patch, l'application fonctionne en IE9-
Mais étant donné que cette application doit être intégré dans un site Joomla, Mootools est intégré par défaut et est utilisé.

Y'aurait-il un moyen de résoudre alors ce nouveau conflit ?

Merci

[sekaijin]

lorsqu'on mixte diverse librairie il faut être prudent

sencha fourni plusieurs adapter ext-jquery par exemple
je ne sais pas s'ils fournissent lu adpater pour mootool

tu peux peut-être voir la doc sur le sandboxing

pour isoler ext
A+JYT