How to fire window.onresize event?

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();.

---

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/

---

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!

---

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.