Extjs button not rendered inside of div even after using renderTo

Question

I currently have a function which returns html div elements. I want to add an Extjs button into the div element. I have the code as below, however even though I use renderTo, the Extjs button does not get rendered inside of the div element. Any suggestions on this?

_getEmptyPageText:function(){
     emptyCreateText = some text; 
     return '<div class="some class">' + 
     '<div class="some div">' + emptyCreateText + ' </div>' ;
     '<div class="some div2">'+ '</div>' + '</div>' ;
},

getCreateButton: function() {
    var me = this;
    var menu;
    menu = {
        xtype: 'button',
        cls: 'ri-btn',
        renderTo: Ext.get('some div2'),
        scale: 'medium',
        text: 'Create',
        handler: function() {
            me.someHandler();
        }
    };
    return menu;
},

Outside of the functions and in controller.js file, I call the functions in the following order:

_getEmptyPageText(); 
getCreateButton(); 

However, doing this is only rendering the div elements which exist inside of _getEmptyPageText() but it does not render code inside of getCreateButton function. What am I missing here?

Answer 1

Use Ext.dom.Query.select('.div2') instead of Ext.get

You have to be sure your div is rendered before you use renderTo

Next example is for ExtJS 5.0+ https://fiddle.sencha.com/#view/editor&fiddle/3hga