How to render a form in a grid row

Question

I'm trying to render a form within a custom row grid without success.

 handler: function (button, record, pressed, eOpts) {
       var grid = this.up('grid'); 
       var store = grid.getStore();

       var innerPanel = Ext.widget('form', {
           //renderTo: record,
           title: 'Title Test',
           name: 'test',         
           items: [{
               xtype: "textfield",
               name: "testfield",
               fieldLabel: "FooTest"
           }]
         });

         // store.add(record);
         store.add(innerPanel);           
}

Any idea how to do this?

Fiddle: https://fiddle.sencha.com/#fiddle/183e

Thanks.

EDITED with taubi19 sugestion.

Answer 1

I think you don't quite understand the concepts yet. The form is a part of the view, the store is an object, that takes care of the data. You want to have a column in which each row is a form. This means you need a column whose xtype is not textfield, but something custom. I found out on senchas kitchen sink, that we need a 'widgetcolumn ' . In your fiddle, change the columns array with the following code and you will have a form in each new row.

columns:[
   {
      header:'Name',
      dataIndex:'name',
      flex:1,
      xtype:'widgetcolumn',
      widget:{
         width:400,
         xtype:'form',
         items:[
            {
               xtype:"textfield",
               name:"testfield",
               fieldLabel:"FooTest"
            },
            {
               xtype:"textfield",
               name:"testfield1",
               fieldLabel:"FooTest1"
            }
         ]
      }
   }
]

And I suggest you remove adding the form to the store. You add records/data to stores. The store.add method takes a model instance as a parameter (Ext.data.Store.add).