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

[steffenbrem]

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]

Try using the renderTo config

[steffenbrem]

Can you do something like this then?

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

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

[dawesi]

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



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

[steffenbrem]

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