How to fire window.onresize event?

Question

I am trying to fire a resize event in a window programmatically:

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

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

Answer 1

I’m not sure what kind of recounts you want, but maybe it’s better to do it? http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.AbstractContainer-method-doLayout

Answer 2

You are creating the wrong event.

Resize is UIEvent, read the specifications here

You need to do this:

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

See here: http://jsfiddle.net/9hsBA/

Answer 3

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

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

There is no need for an identifier in the viewport. The .query ('viewport') part uses the configuration of aliases in the viewport.

Answer 4

In case createEvent can get deprecated in favor of CustomEvent , here is a similar fragment using the CustomEvent API:

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