在 ExtJS 4 中提交表单 + 网格答案

【问题标题】：Submitting a form + grid in ExtJS 4在 ExtJS 4 中提交表单 + 网格
【发布时间】：2014-01-23 17:17:06
【问题描述】：

我有一个 Ext.form.Panel，其中包含一个网格和一些用于编辑网格中每一行的文本字段。与此非常相似：http://dev.sencha.com/deploy/ext-4.0.2a/examples/writer/writer.html，只是不涉及 AJAX；我的数据存储在本地。

如何通过标准 POST 提交网格的行？

如果我只是简单地做 myForm.submit()，有两个问题：

正在验证用于编辑网格行的字段。提交表单时应忽略它们。
没有提交网格中的数据。

我看到的唯一解决方案是以某种方式阻止字段被验证并创建一些包含每行数据的隐藏字段。有没有更好的选择？

提前谢谢你！

【问题讨论】：

不清楚你的意思……也许可以放一个你试图提交的表单样本。并且网格被忽略，因为提交只处理分配了名称的表单字段
我做了一些修改。我希望现在更清楚一点。我还添加了我使用的解决方案。

标签： javascript web-applications extjs extjs4

【解决方案1】：

这是我使用的解决方案：

为了在提交时忽略表单中的某些字段，我重写了表单的 getFields() 方法。恶心，我知道。在下面的代码中，具有“ignoreInMainForm”属性的字段将被忽略。

Ext.getCmp('myForm').getForm().getFields = function() {
    var fields = this._fields;
    if (!fields) {
        var s = [],
        t = this.owner.query('[isFormField]');
        for (var i in t) {
            if (t[i]['ignoreInMainForm'] !== true) {
                s.push(t[i]);
            }
        }
        fields = this._fields = Ext.create('Ext.util.MixedCollection');
        fields.addAll(s);
    }
    return fields;
}

为了提交网格的数据，我将所有行编码到一个 JSON 对象中，并添加到表单的 baseParams 中。

var myItems = myStore.getRange();
var myJson = [];
for (var i in myItems) {
    myJson.push({
        'a': myItems[i].get('a'),
        'b': myItems[i].get('b'),
        ...
    });
}
Ext.getCmp('formHiddenId').setValue(Ext.encode(myJson ));

【讨论】：

【解决方案2】：

这部分对我有用 - 在 ExtJS 4.0.2a 中，我无法添加到 baseParams，因此我触发了发送处理程序来代替：

function prepareToSendForm(a, b) {
var myItems = Ext.getCmp('grid-links').store.getRange();
var myJson = [];
for (var i in myItems) {
    myJson.push({
        'title': myItems[i].get('title'),
        'url': myItems[i].get('url'),
        'refreshes': myItems[i].get('refreshes')
    });
}

//Update the hidden field to be the JSON of the Grid
for (var i=0, len=Ext.getCmp('roomCreateForm').getForm()._fields.items.length; i<len; i++) {
    var item = Ext.getCmp('roomCreateForm').getForm()._fields.items[i];
    if (item.name=='roomLinks') {
        Ext.getCmp('roomCreateForm').getForm()._fields.items[i].inputEl.dom.value=Ext.encode(myJson);
        break;
    }
}

Ext.getCmp('roomCreateForm').submit();
}

这很有效（但不是即插即用）。我必须在表单中创建一个隐藏字段（上面名为 roomLinks），上面的第二个 for 循环会找到该字段并将该值替换为 JSON 化的结果。

【讨论】：