Results 1 to 2 of 2

Thread: Ext.on() not working on CustomEvent for mousemove

  1. #1
    Sencha User
    Join Date
    Apr 2010

    Default Ext.on() not working on CustomEvent for mousemove

    (Sorry if this shows up doubly, but when I made the thread yesterday it said something about moderation, but I saw new threads pop up since and mine wasn't so I assume there was some error)

    As mousemove inside an iframe does not get handled through to the 'surrounding' page, I tried to relay that event using a bit of a code found on StackOverflow:
    function bubbleIframeMouseMove(iframe){
        iframe.contentWindow.addEventListener('mousemove', function( event ) {
            var boundingClientRect = iframe.getBoundingClientRect();
            var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});
            evt.clientX = Math.floor(event.clientX + boundingClientRect.left);
            evt.clientY = Math.floor(event.clientY +;
    and since IE does not know CustomEvent, there's a polyfill for IE as well:
    (function () {
        if ( typeof window.CustomEvent === "function" ) return false;
        function CustomEvent ( event, params ) {
            params = params || { bubbles: false, cancelable: false, detail: undefined };
            var evt = document.createEvent( 'CustomEvent' );
            evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
            return evt;
        CustomEvent.prototype = window.Event.prototype;
        window.CustomEvent = CustomEvent;
    The issue is that this works perfectly fine in firefox, and it does also work fine in IE, but just as long as you don't use Ext.on() or addListener().
    This WILL work above the page and above the iframe:
    window.addEventListener('mousemove', function( event ) {
        console.log('dom mouse moved: ' + event.clientX + 'x' + event.clientY);
    This WILL work above the page but WILL NOT work above the iframe:
    Ext.get(window).on('mousemove', function( event ) {
        console.log('ext mouse moved: ' + event.clientX + 'x' + event.clientY);
    I tried to use Ext.get(iframe).fireEvent('mousemove', evt) instead of dispatchEvent, or using Ext.get(iframe).relayEvents(Ext.get(iframe.contentWindow), ['mousemove'])
    Both did not work at all, not even for addEventListener()

    In fact, this did not work either: (also not if you substitute contentDocument)
    Ext.get(domIframe.contentWindow).on('mousemove', function( event ) {
        console.log('inner: ' + event.clientX + 'x' + event.clientY);
    Complete fiddle for this, don't forget to enable console:
    Will work fine in firefox, will show the error in IE

    Is there any way I can get ext to recognize custom events?

    Reason I need this: I got a splitter next to an Iframe. In Ext.dd.DragTracker.onMouseMove(), it will not call triggerStart() until the mouse moved at least 5px from the initial position. Since mouse movement is not reported over an Iframe, that means I can only drag the splitter one way (or drag it away from the iframe and then drag it back over it, once started it seems to work). Using the event relaying above works in firefox, but not in IE, which will be because Ext.on() does not work in that case on IE.

  2. #2
    Sencha User
    Join Date
    Apr 2010



Similar Threads

  1. Ext.on() not working on CustomEvent for mousemove
    By kadser in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 8 Nov 2017, 7:14 AM
  2. formpanel + mousemove
    By bello in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 17 Mar 2010, 5:24 AM
  3. Toolbar menu and Mousemove
    By sunco in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Oct 2009, 11:24 AM
  4. CustomEvent sent by Menu Item
    By young_matthewd in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 4 Nov 2006, 2:22 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts