javascript - 无法提交扩展数据 View 的自定义字段

Question

我有一个 fiddle这证明了这种奇怪的行为。简而言之，我有一个扩展 Ext.DataView 的自定义字段。我需要扩展数据 View ，因为这个字段应该有动态内容。我的字段是这样定义的:

Ext.define('Ext.ux.SimpleList', {
    extend: 'Ext.DataView',
    alias: 'widget.simplelist', 
    requires: [
        'Ext.XTemplate'
    ],
    itemSelector: 'div.record',
    isFormField: true,
    getFieldIdentifier: function () {
        return this.name;
    },
    getModelData: function() {
        var me = this;
        var data = {};
        data[me.getFieldIdentifier()] = me.getValue();
        return data;
    },
    getSubmitData: function() { return {}; },
    submitValue: true,
    isValid: function () { return true; },
    isDirty: function () { return true; },
    validate: function () { return true; },
    isFileUpload: function() { return false; }, 
    constructor: function(config) {
        Ext.applyIf(config, {
            tpl: [
               '{% var name = this.owner.name; %}',
                '<tpl for=".">',
                    '<div class="record"><input record-id="{id}" type="checkbox" name="{[name]}" /> {label}</div>',
                '</tpl>',
                {compiled: true}
            ]
        });
        this.callParent([config]);
    },
    getValue: function () {        
        var cb = this.el.select("input").elements, i, res = [];
        for (i in cb) {
            if (cb.hasOwnProperty(i) && cb[i].checked) {
                res.push(cb[i].getAttribute("record-id"));
            }
        }
        return res;
    },
    setValue: function (values) {
        //not yet implemented
    }
});

这就是我将此字段添加到表单的方式:

Ext.create("Ext.form.Panel",{
    renderTo: Ext.getBody(),
    items:[{
        xtype: "textfield",
        name: "text"
    },{
       xtype: "simplelist",
       name: "list",
       store: {
            fields: ["id", "label", "checked"],
            data: [{"id": "1", "label": "One"},{"id": "2", "label": "Two"}]
        }
    },{
       xtype: "button",
       text: "Submit",
       handler: function () {
            var frm = this.up("form").getForm();
            console.log(frm.getFieldValues()); // it' ok
            //simplelist field is not submitted
            this.up("form").getForm().submit({
                url: "/"
            });
        }
   }]
});

如您所见，当我提交表单时，我将记录到控制台表单字段值。有趣的是，我在这些字段值中看到了我的自定义字段。所以，我有一个 isFormField 设置为 true 的字段，这个字段在表单 getFields() 方法返回的列表中，这个字段是也在表单 getFieldValues() 方法返回的那些值中，但仍然没有提交该字段。这有什么问题，我该如何解决？

Answer 1

您的代码使用 basicForm.getFieldValues()，它调用带有一些参数的 basicForm.getValues()，而提交时表单使用相同的方法但参数不同。其中一个参数是 useDataValues，它决定是使用 getModelData 还是 getSubmitData。

您在 getSubmitData 方法中返回空对象，这会阻止它正确获取值。

要使这两种方法都在您当前的状态下工作，您需要更改的是:

getSubmitData: function() {
    return this.getModelData();
}