Question

我有一个复选框组组件，表单提交时的每个复选框值都作为单独的参数传递，如下所示：

mycheckboxgroup: val1
mycheckboxgroup:val2
mycheckboxgroup:val3

如何在逗号分隔的字符串中提交所有复选框组值？

mycheckboxgroup: val1, val2, val3

我尝试使用getSubmitData方法，但这不起作用。这些值仍然以单独的参数提交。

以下是我的CheckBoxGroup类的片段：

Ext.define("MyApp.view.form.field.CheckboxGroup",{
   extend:"Ext.form.CheckboxGroup",

   vertical:true,
   columns:2,
   getSubmitData:function(){ 
      var fldNm = this.name; 
      return this.getValue()[fldNm].toString();
   },

  initComponent:function(){ 
     .....
     .....

     this.callParent(arguments);
  }

});

我正在使用Ext 6.0.2

由于

Answer 1

问题在于，您的表单在提交后会查询复选框，而不是整个组。

但是，您可以使用非持久性复选框和聚合值的隐藏字段创建自定义组件。它可能需要一些微调，但这样的事情：

Ext.define("MyApp.ux.CheckboxGroup",{
    extend:"Ext.form.CheckboxGroup",
    xtype:'mycheckboxgroup',
    initComponent:function() {
        var me = this,
            hf = Ext.widget({xtype:'hiddenfield',name:me.name});
        me.callParent(arguments);
        var checkboxes = me.query('checkbox'),
            onChange = function(cb, nv) {
                var arr = [];
                Ext.each(checkboxes,function(item) {
                    if(item.checked) arr.push(item.inputValue);
                });
                hf.setValue(arr.join(', '));
            };
        Ext.each(checkboxes, function(item) {
            console.log(item);
            item.on('change',onChange);
            item.submitValue = false; // do not submit the checkbox value
        })
        me.add(hf);
    }
});

相关小提琴：https://fiddle.sencha.com/#view/editor&fiddle/1mim

ExtJS - 将选定的复选框值提交为字符串

1 个答案: