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.

score 2 · Accepted Answer · edited Apr 15 '22 at 15:12

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).

Thanks taubi 19. I recognize that render a form within a row is something strange, but sometimes some apps are different from the ordinary and makes sense this type of solution (in this case, the form is not used to send data to the server and is dynamically created). I had tried a solution with widgetcolumn but only with a field, had not considered the possibility of a form. Your answer helps, thanks. — jose, Apr 03 '16 at 12:07

How to render a form in a grid row

1 Answers1