Base ExtJS fiddle

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css">
<table id="myTable" width="100%" border="1" cellspacing="1">
    <tr>
        <th>ID</th>
    </tr>
     <tr>
        <th>ID2</th>
    </tr>
</table>

<br><br>

CSS

body { padding: 20px }

JavaScript

Ext.onReady(function(){
    
    var tpl = new Ext.Template(
        '<tr>',
            '<td>{0}</td>',
        '</tr>'
    );
    
    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'add Row',
        handler: function(){
            tpl.append('myTable', [Ext.id()]);
        }
    })
    
});