如何在网格行中呈现表单

Question

我试图在自定义行网格中呈现表单但没有成功。

 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);           
}

知道怎么做吗？

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

谢谢。

使用 taubi19 的建议进行编辑。

Answer 1

我认为您还不太了解这些概念。表单是视图的一部分，商店是一个对象，负责处理数据。您想要一列，其中每一行都是一个表单。这意味着您需要一个 xtype 不是文本字段的列，而是自定义的列。我在 senchas kitchen sink 上发现我们需要一个 'widgetcolumn ' 。在您的 fiddle 中，使用以下代码更改列数组，您将在每个新行中都有一个表单。

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"
            }
         ]
      }
   }
]

并且我建议您删除将表单添加到商店。您将 records/data 添加到商店。 store.add 方法将模型实例作为参数 (Ext.data.Store.add).

如何在网格行中呈现表单

How to render a form in a grid row

javascript

grid

extjs

extjs5