無法提交自定義字段，它擴展了dataview

我有一個fiddle它演示了這種奇怪的行爲。簡而言之，我有一個自定義字段，它可以擴展爲Ext.DataView。我需要擴展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()方法返回的列表中，並且這個字段也是通過表格getFieldValues()方法返回的那些值之間，但是仍然沒有提交這個字段。那有什麼問題，我該如何解決它？

來源

2017-06-07 Jacobian

你的代碼使用basicForm.getFieldValues()，它調用basicForm.getValues()的某些參數，而提交時的表單使用不同參數的相同方法。其中一個參數是useDataValues，它決定是使用getModelData還是getSubmitData。

您正在返回getSubmitData方法中的空對象，這會阻止它正確獲取值。

所有你需要改變，這兩種方法在你目前的工作狀態，是這樣的：

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

來源

2017-06-07 17:32:45 MarthyM

謝謝你，先生！有用！ – Jacobian

本着'教人如何釣魚'的精神，不要害怕挖掘（任何）框架代碼來發現它，它是如何工作的以及如何使它適合你。我所做的只是在'Ext.form.Basic.submit（）'方法中放置一個斷點並查看它帶我的位置。另外，還有一些輔助建議，你可以避免調用'.getForm（）'部分，因爲'formpanel'也提交了mehtod，它所做的只是調用'basicForm'提交方法。 – MarthyM

我真的很感謝你的建議！謝謝！ – Jacobian

無法提交自定義字段，它擴展了dataview

回答

相關問題