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">
    <thead>
    <tr>
        <th>ID</th>
    </tr>
    </thead>
    <tbody>
        <tr>
          <td>Existing row</td>
          <td>test</td>
        </tr>
    </tbody>
</table>

<br><br>

CSS

body  { padding: 20px }
tbody { background-color: #f6f6f6 }
thead { background-color: #fefef6 }

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(){
            
            // Get the tbody from the element with id myTable
            var tableBody = Ext.get('myTable').first('tbody');
            
            // Append the generated template to the table body
            tpl.append(tableBody, [Ext.id()]);
        }
    })
    
});