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?
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