How to add new row to a html table in ExtJS

Question

Hello I have worked with regular tables and javascript to add new rows at the end of table, could someone help me out with adding new row containing html elements at the end of table?

ChrisR · Accepted Answer · 2011-03-15T15:44:36.850

4

The easiest way is with an Ext.Template

var tpl = new Ext.Template(
    '<tr>',
        '<td>{0}</td>',
    '</tr>'
);
tpl.append('myTable', [ Ext.id() ]);

Check a working example here: http://jsfiddle.net/chrisramakers/xG3wq/

Updated example:
http://jsfiddle.net/chrisramakers/ZcQAX/

edited Mar 15 '11 at 15:44

answered Mar 15 '11 at 14:31

ChrisR

14,370
16
70
107

Chris, in the example link that you gave me it adds the row to a new table body, I would like to do that to the existing body. Also does 'myTable' be the ID of the table? – macha Mar 15 '11 at 14:37
You can append to any element you want, the append() method of Ext.Template accepts a domnode, element id or Ext.Element as first argument. – ChrisR Mar 15 '11 at 15:37
Check the new example in my answer, i've also added some comments – ChrisR Mar 15 '11 at 15:44

score 1 · Answer 2 · answered Mar 15 '11 at 17:53

If you are dealing with a more complicated dom insert you might consider using a template created using Ext.DomHelper shown below.

var tpl = Ext.DomHelper.createTemplate({
    tag: 'tr', children: [{
        tag: 'td', html: '{0}'
    }]
});
tpl.append('myTable', [ Ext.id() ]);

http://dev.sencha.com/deploy/dev/docs/?class=Ext.DomHelper

How to add new row to a html table in ExtJS

2 Answers2