PDA

View Full Version : HELP: Render Component into HTML element (div etc.)



steffenbrem
30 Jul 2012, 4:15 AM
Hello,

How do I render an Ext Component (buttons etc.) into a normal HTML element? I've got an Ext.Container with a normal html table in it. I want to render an Ext.Button into the table. In Ext Js you can use the render() method, but I can't find any similar in Sencha Touch 2.



Ext.create('Ext.Container', {
html: [
'<table>',
'<tr>',
'<td>some data...</td>',
'<td>' + Ext.create('Ext.Button', { text: 'Button' }) + '</td>',
'</tr>',
'</table>'
]
});



Thanks!

mitchellsimoens
1 Aug 2012, 6:21 AM
Try using the renderTo config

steffenbrem
1 Aug 2012, 8:48 AM
Can you do something like this then?



var div = document.createElement('div');

Ext.create('Ext.Button', {
text: 'Button',
renderTo: div
});

dawesi
1 Aug 2012, 7:11 PM
it would be renderTo: 'div' (with quotes) where 'div' is the id of the div

so if you had


<div id="myContainer"></div>

then you would code:




http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo
(http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo)


var div = document.createElement('div');Ext.create('Ext.Button', { text: 'Button', renderTo: 'myContainer'});

steffenbrem
1 Aug 2012, 10:48 PM
Thanks dawesi! Maybe it's a good thing to update those things in the docs? So I would know that I could render it to an element ID etc.

Well, it's working now, thanks guys :)