Extjs button not rendered inside of div even after using renderTo-CodePudding

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?

CodePudding user response：

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