javascript - ExtJS v3 - 从表单面板内的网格面板访问数据

Question

我有一个在表单中使用的 GridPanel。

当我提交表单时，我可以毫无问题地从表单元素中获取数据，但无法读取/查看放置在网格内的数据。

(基本上，我给他们一个在网格中添加电子邮件地址的区域)。

我想我可以将网格面板数据设置为表单中的隐藏值，但这并没有像我想象的那样工作。

我应该在此处采取什么方向，以便当有人提交表单时我可以看到主要的“原因”字段(我现在可以)以及他们输入的每个电子邮件地址。

(我通过使用 POST 的按钮提交表单)。

var projection_record = Ext.data.Record.create([
    { name: 'Email'}
]);

var projections_store = new Ext.data.Store({
    reader: new Ext.data.ArrayReader({
        idIndex: 0
    }, projection_record)
});

var projections_grid = new Ext.grid.EditorGridPanel({
    store: projections_store,
    columns: [
    {
        xtype: 'gridcolumn',
        dataIndex: 'Email',
        header: 'Approval Email',
        sortable: false,
        width: 250,
        editor: new Ext.form.TextField({
            valueField: 'displayText',
            displayField: 'displayText'
        })
    },
    {
        xtype: 'actioncolumn',
        header: "Delete",
        width: 150,
        items: [{
          icon: 'images/delete.png',
          handler: function(grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    alert("Delete " + rec.get('Email') + " ?");
                }
          //handler: function(grid, rowIndex, colindex) {
              //var record = grid.getStore().getAt(rowIndex);
              //var id = record.get("Email");
              //window.location = '<% $base %>storage_approval_delete/' + id;
          //}
       }]
     }
    ],
    tbar: [{
        text: 'Approvers',
        icon: 'images/Add.png',
        handler: function(){
            var projection = projections_grid.getStore().recordType;
            var p = new projection({
                Email: ''
            });
            projections_grid.stopEditing();
            projections_store.insert(0,p);
            projections_grid.startEditing(0,0);
        }
    }],
    autoHeight: true,
    autoWidth: true,
    trackMouseOver: true,
    stripeRows: true
});

var simpleForm = new Ext.FormPanel ({
    labelWidth: 175,
    id: 'simpleForm',
    url:'./manager_approvals',
    method: 'POST',
    frame:true,
    title: 'Ada a New Project',
    bodyStyle:'padding:5px 5px 0',
    width: 850,
    defaultType: 'textfield',

    items: [
        {
            fieldLabel: 'Request Information',
            name: 'Description',
            xtype: 'textarea',
            allowBlank: true,
            anchor:'100%'
        },
        {
            xtype: 'fieldset',
            title: 'Approving Managers',
            autoHeight: true,
            autoWidth: true,
            collapsible: false,
            collapsed: false,
            items: [projections_grid]
        },
        {
            xtype: 'hidden',
            name: 'hidden1',
            value: projections_store
        }
    ]
});

Answer 1

嗯......我会认真考虑为电子邮件列表添加逗号分隔字段......

如果您一心想让他们同时提交表单并编辑网格(祝您的用户了解他们需要做什么)，您需要做的就是提交:查找支持您的商店网格，从商店记录中获取数据值(迭代)，提取所需的值，用逗号连接，最后设置隐藏字段或仅包含为参数。

祝你好运。