View Full Version : Ext.Component should provide an event like 'render' or 'afterrender'

14 Dec 2011, 11:37 AM
Both 'render' and 'afterrender' events come pretty handy with ExtJs and I guess they are very widely used.
Touch 2 seems to have given us a blanket method called "initialize" that has supposedly replaced all these events, plus "initComponent", "afterRender" etc. methods.

However atleast giving "render" and "afterrender" events is desirable (I would want afterRender method too but not sure if other community members/Touch team would agree).

Let me give you 2 reasons for adding these events back in Touch 2:

1) I needed to manipulate scrolling of a Component manually after it had rendered. No such event and nothing else available.
I ended up doing the following:

initialize: function () {
Ext.Toolbar.prototype.initialize.call(this, arguments);

var scroller = this.getScrollable().getScroller();
setTimeout(function () {
//My code using scroller
}, 1000);

The dom of the component (and its items) was not completely ready when initialize was called. I had to do a setTimeout to have the dom ready. render/afterrender would address this easily.

2) Notice the first line of initilize method above. It looks very ugly. initialize is supposed to be overridden in derived classes that invoke this.callParent.
But what if a single component on a page needs to perform some initializationt task. Giving initilize method in component config gives me the above ugly code and there seems to be no other method/event available to override/subscribe.

Jamie Avins
14 Dec 2011, 11:51 AM
There is a 'painted' event that should be used if you need to access properties on elements after they are actually in the DOM. Thus far we have not put in the older 'render' events as Touch 2 no longer follows the same process as it used to. Elements can now move in and out of the DOM, effectively being de-rendered or erased from the DOM body. Touch 2 may fire the painted/erased event multiple times, which would never happen in Touch 1 or ExtJS. We do plan on putting render and afterrender back in for backward compatibility, but they should be considered deprecated and won't function exactly the same. This is similar to the loss of afterLayout/doLayout which really no longer exist as they did before.

5 Jan 2012, 10:53 AM
Yes Jamie, I understand that. But what about the use-case in my second point.
Let's say I have a DataView which when rendered, I need to scroll to the 10th item in the list. Afterwards, when tabs are switched or something like that, I don't care.

An event which fires the first time a component gets "painted" would be really useful as I can imagine a lot of other use cases too. I know you would suggest using "painted" with {single: true} and that certainly is a good option. But having a one-time "painted" event might come in handy.

If the Touch team does not agree, I would not push for it as we have an easy workaround.

6 Jan 2012, 12:14 AM
It's the same for me. I'm accessing the element right after component creation and am listening to the painted event right now, but it feels kind of ugly to use {single: true} to catch only the first event. Maybe a shorthand like firstpainted instead of the old render event is an idea?