I have 3 object that i want to be added into template which i will use to set edditorgrid's view header.

Code:
   // The fields in the grid's header
    var ntTitle = new Ext.form.TextField({
       // renderTo: 'new-task-title',
        emptyText: 'Add a task...'
    });

    var ntCat = new Ext.form.ComboBox({
    //   renderTo: 'new-task-cat',
        disabled:true,
        displayField: 'text',
        triggerAction: 'all',
        mode:'local',
        selectOnFocus:true,
        listClass:'x-combo-list-small',
        //listeners: comboEvents
    });

    var ntDue = new Ext.form.DateField({
    //   renderTo: 'new-task-due',
        value: new Date(),
        disabled:true,
        format : "m/d/Y"
    });
           
      // custom template for the grid header
    var headerTpl = new Ext.XTemplate(
        '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
        '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
        '<tbody><tr class="new-task-row">',
            '<td><div class="x-small-editor" id="new-task-title">{first}</div></td>',
            '<td><div class="x-small-editor" id="new-task-cat">{second}</div></td>',
            '<td><div class="x-small-editor" id="new-task-due">{third}</div></td>',
        '</tr></tbody>',
        "</table>"
    );
i want them to be put into first, second and third places