无法提交自定义字段,该字段会扩展数据视图

时间:2017-06-07 15:22:57

标签: javascript extjs

我有fiddle来证明这种奇怪的行为。简而言之,我有一个扩展Ext.DataView的自定义字段。我需要扩展dataview,因为这个字段应该有动态内容。这是我的领域的定义:

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()方法返回的列表中,此字段也位于表单{{1}返回的值中}方法,但仍未提交此字段。有什么问题,我该如何解决?

1 个答案:

答案 0 :(得分:2)

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

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

您需要更改两种方法才能在当前状态下工作:

getSubmitData