Ext.getElementById does not work from Ext.Controller init or onLaunch events

Question

I have the following Ext.getElementById call from a specific part of application code, that does work when called in this context:

init: function() {
    // template method called when app boots; before Viewport is created

    this.control({
        'launcherlist': {
            itemclick: function (dataView, record) {
            Ext.getElementById('element-id');
         },
    }
    ...
}

However I need to call the getElementById at an earlier stage, before having any user- triggered event occurring.

When getElementById is called directly within init it doesn't work as init is called when app boots; before Viewport is created.

So I decided to override the controller's onLaunch event, since onLaunch is a template method like init, but is called after Viewport is created:

onLaunch: function() {
    Ext.getElementById('element-id');
},

However this didn't work either.

TL/DR

Where can I put a working Ext.getElementById call before any user-triggered-action takes place?

score 3 · Answer 1 · answered Jul 08 '12 at 14:00

3

You might want to explain what you're trying to do. getElementById is a "private" method, you shouldn't really be calling it. If you want to get an element by id, use Ext.get.

answered Jul 08 '12 at 14:00

Evan Trimboli

29,900
6
45
66

I have to simply retrieve an element by id, in my case it's a `td` with id `about-launcher`. Previously the widget's constructor in which this code resides was called following a user-initiated action (from the `controller`). Now I need to initiate the widget before any user-initiated action. But `Ext.get` (I +1ed your suggestion which indeed is a better approach) does not work (returns `null`) when called from the controller's `onLaunch` event. – Joseph Victor Zammit Jul 09 '12 at 08:15
If I run `Ext.get('about-launcher');` in the Chrome console after load, the statement works. – Joseph Victor Zammit Jul 09 '12 at 08:32
1

onLaunch is likely too early, you should listen to the render event of the component. – Evan Trimboli Jul 09 '12 at 09:14
Thanks Evan. Isn't there a controller event similar to `onLaunch` that is called after *all* child components of the viewport are rendered? – Joseph Victor Zammit Jul 09 '12 at 09:16
Evan is right; the `render` event is where you should put it. I've just checked with my code and it works (running Ext.getElementById from the render event). So either you hook on the wrong render event or the element you are looking for is not rendered when the view loads (could happen for submenu items etc.) – Izhaki Jul 09 '12 at 09:58
@Izhaki I think I forgot to disclose an important piece of info. My "widget" extends `Ext.view.View`. The event that I should have been listening to is `viewready`. Now it works! Apologies for the missing piece of info! – Joseph Victor Zammit Jul 09 '12 at 10:19
@EvanTrimboli Can you edit your answer to instruct me to use `viewready` since my widget extends `Ext.view.View`? Then I'll mark it as correct. Thanks. – Joseph Victor Zammit Jul 09 '12 at 10:21

score 0 · Accepted Answer · answered Jul 10 '12 at 20:37

Solution:

Since the widget that renders the DOM element I'm looking for extends Ext.view.View, the correct event after which Ext.get can actually find the rendered element is the viewready event.

P.S. One should use Ext.get anywhere rather than Ext.getElementById as the latter is a private method.

Ext.getElementById does not work from Ext.Controller init or onLaunch events

2 Answers2