如何在网格行中呈现表单

时间:2016-04-01 15:24:03

标签: javascript extjs grid extjs5

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

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

知道怎么做吗?

小提琴:https://fiddle.sencha.com/#fiddle/183e

感谢。

用taubi19 sugestion编辑。

1 个答案:

答案 0 :(得分:2)

我认为你还没有完全理解这些概念。表单是视图的一部分,存储是一个对象,负责处理数据。您希望有一个列,其中每一行都是一个表单。这意味着您需要一个xtype不是textfield但是自定义的列。我发现了kitchen sink,我们需要一个'widgetcolumn'。在您的小提琴中,使用以下代码更改columns数组,每个新行中都有一个表单。

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

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