How Can I add Dynamic Textboxes in extjs grid - extjs

Question

I am having a button on page on the click of the button i need to add rows inside extjs grid.
The row will contain the controls like textbox, combobox, datefields etc.
I have added dynamic rows to the store like this -
var r = Ext.create('Model', {
name: 'XYZ',
email: 'abc#abc.com',
start: new Date(),
salary: 50000,
active: true
});
var i = 0;
page.store.insert(i, r);
But this way i can add records only. and i want to add controls to the grid. Please suggest.
Thanks,

Answer 1

I have used the grid row editing plugin for the issue.
Here i am adding the row to the store and opening it in edit mode via edit plugin.
Sample code is here.
tbar: [
{
text: 'Add Row',
iconCls: 'employee-add',
handler: function () {
//var Date = new Date();
//var Time = new Date().getTime() / 1000;
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('TagAdjustment', {
startDate: Ext.Date.clearTime(new Date()),
startTime: 10,
stopDate: Ext.Date.clearTime(new Date()),
stopTime: 10,
rampStart: 10,
rampStop: 10,
gen: 10
});
var selectedRecord = grid.getSelectionModel().getSelection()[0];
var row = grid.store.indexOf(selectedRecord);
store.insert(row + 1, r);
rowEditing.startEdit(row + 1, 0);
}
},