How to fire window.onresize event?

Question

I am trying to fire the resize event on window programmatically:

var evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', true, false);
window.dispatchEvent(evt);

That unfortunately does not work. I am trying to make ExtJS library to do recalculations, and it uses DOM Level 3 events so I cannot just call window.onresize();.

I don't know ExtJS very well, but in jQuery it is trivial to fire a resize event by doing `$(window).resize();` because jQuery has it's own event abstraction. Doesn't ExtJS has something similar you can use? — Martin Jespersen, Oct 01 '11 at 17:56
@sdleihssirhc This would only work if you attach the event the DOM0 way. — duri, Oct 01 '11 at 18:42

Martin Jespersen · Answer 1 · 2011-10-01T18:42:02.863

27

You are creating the wrong event.

Resize is a UIEvent, read the specs here

You need to do this:

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

See it in action here: http://jsfiddle.net/9hsBA/

edited Oct 01 '11 at 18:42

answered Oct 01 '11 at 18:34

Martin Jespersen

25,743
8
56
68

That seems to work on JSFiddle, but when I run it in WebKit Inspector console, ExtJS application does not layout. Nothing happens. It layouts if I resize the browser window manually. – Tower Oct 01 '11 at 19:00
In that case ExtJS does not use DOM level 3 events like you stated, but since i don't know ExtJS i have no idea how their implementation is. – Martin Jespersen Oct 01 '11 at 19:05
I've been looking for this solution for a while and to understand why resize() wasn't working. Thank you very much indeed. – jtromans Sep 20 '13 at 10:27

score 4 · Answer 2 · answered Jan 13 '15 at 18:25

In case createEvent might get deprecated in favor of CustomEvent, here's a similar snippet using the CustomEvent API:

var ev = new CustomEvent('resize'); //instantiate the resize event
ev.initEvent('resize');

window.dispatchEvent(ev); // fire 'resize' event!

score 3 · Answer 3 · answered Feb 28 '13 at 01:05

Just in case anyone else needs this, in Extjs 4.1 you can do something typically inelegant...

    Ext.ComponentQuery.query('viewport')[0].doLayout();

No need for an id on the viewport - the .query('viewport') part is using the viewport's alias config.

How to fire window.onresize event?

3 Answers3