ExtJS extend component, unable to do this.findById()

Question

Hey everyone,

I know this might be a weird question by I'm having trouble trying to find my own item by id. Allow me to explain what I'm trying to do...

Here's what possible...

var myMenu = new Ext.menu.Menu({
    id: "my-menu",
    items: [{
        id: "first-item",
        text: "hello"
    }]
});

When I do this...

myMenu.findById('first-item');  // it will return a component...

HOWEVER, when I try to extend it in such a way...

NewMenu = Ext.extend(Ext.menu.Menu, {

    id: "",
    win_id: "",

    initComponent: function(){
         // All the neccessary code
    },

    onRender: function(){
         // codes...
    },

    // Override the add function
    add: function(){
         this.findById(this.win_id); // return NULL
    }
});

Sorry for my missing codes. I understand that it could be along the line that the object has not render after it added the item, hence it will return NULL. Is there any way I can do it? I'm using ExtJS 3.0 hence, there is no "onAdd" method to override. Not sure it will help.

Let me know if I miss any impt information.

Cheers and thanks a mil, Mickey

Answer 1

The second parameter of Ext.extend() should be an object, not a function:

NewMenu = Ext.extend(Ext.menu.Menu, {

    id: "",
    win_id: "",

    initComponent: function(){
         // All the neccessary code
    },

    ...

---

EDIT: if syntax is not the issue then I guess you are right about that the object has not render after it added the item. I think this is an important-to-know limitation that a component is not completely initialized until the underlying DOM element is inserted and rendered in the document.

Maybe I can suggest something if you would explain what you want to do with the return value of this.findById(this.win_id), like delaying the menu items initialization until at least the win_id element has been rendered.

Answer 2

do you have this in NewMenu.initComponent ?

NewMenu.superclass.initComponent.call(this);