Extjs 将值另存为字符串数组，而不是自定义xtype CQ5中的逗号分隔字符串

我已经为multiselect创建了一个自定义xtype，但是我无法理解需要执行哪些更改才能将值保存为字符串数组而不是逗号分隔的字符串

目前，它存储的值如下所示

房地产行业 类型字符串 价值政府、医疗

相反，我想保存以下信息

房地产行业 类型字符串[] 价值政府、医疗

非常感谢您的建议和指点

CQ.Ext.form.Multiselect = CQ.Ext.extend(CQ.Ext.form.Field,  {
store:null,
storeUrl:'',
displayField:'text',
valueField:'value',
allowBlank:true,
minLength:0,
blankText:CQ.Ext.form.TextField.prototype.blankText,
copy:false,
allowDup:false,
allowTrash:false,
legend:null,
focusClass:undefined,
delimiter:',',
view:null,
dragGroup:null,
dropGroup:null,
tbar:null,
appendOnly:false,
sortField:null,
sortDir:'ASC',
defaultAutoCreate : {tag: "div"},


initComponent: function(){
    CQ.Ext.form.Multiselect.superclass.initComponent.call(this);
    this.addEvents({
        'dblclick' : true,
        'click' : true,
        'change' : true,
        'drop' : true
    });    
},
onRender: function(ct, position){
    var fs, cls, tpl;
    CQ.Ext.form.Multiselect.superclass.onRender.call(this, ct, position);

    cls = 'ux-mselect';

    fs = new CQ.Ext.form.FieldSet({
        renderTo:this.el,
        title:this.legend,
        height:this.height,
        width:this.width,
        style:"padding:1px;",
        tbar:this.tbar
    });
    if(!this.legend){
    //fs.el.down('.'+fs.headerCls).remove();
    fs.body.addClass(cls);
    }
    tpl = '<tpl for="."><div class="' + cls + '-item';
    if(CQ.Ext.isIE || CQ.Ext.isIE7 || CQ.Ext.isOpera )tpl+='" unselectable=on';
    else tpl+=' x-unselectable"';
    tpl+='>{' + this.displayField + '}</div></tpl>';


     this.store = new CQ.Ext.data.JsonStore({
            autoload:true,
            url: CQ.HTTP.externalize(this.storeUrl),
            fields:['value','text']

    });

     this.store.load();


    this.view = new CQ.Ext.ux.DDView({
        multiSelect: true, store: this.store, selectedClass: cls+"-selected", tpl:tpl,
        allowDup:this.allowDup, copy: this.copy, allowTrash: this.allowTrash,
        dragGroup: this.dragGroup, dropGroup: this.dropGroup, itemSelector:"."+cls+"-item",
        isFormField:false, applyTo:fs.body, appendOnly:this.appendOnly,
        sortField:this.sortField, sortDir:this.sortDir
    });

    fs.add(this.view);

    this.view.on('click', this.onViewClick, this);
    this.view.on('beforeClick', this.onViewBeforeClick, this);
    this.view.on('dblclick', this.onViewDblClick, this);
    this.view.on('drop', function(ddView, n, dd, e, data){
        return this.fireEvent("drop", ddView, n, dd, e, data);
    }, this);

    this.hiddenName = this.name;
    var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};
    if (this.isFormField) {
        this.hiddenField = this.el.createChild(hiddenTag);
    } else {
        this.hiddenField = CQ.Ext.get(document.body).createChild(hiddenTag);
    }
    fs.doLayout();
},

initValue:CQ.Ext.emptyFn,

onViewClick: function(vw, index, node, e) {
    var arrayIndex = this.preClickSelections.indexOf(index);
    if (arrayIndex  != -1)
    {
        this.preClickSelections.splice(arrayIndex, 1);
        this.view.clearSelections(true);
        this.view.select(this.preClickSelections);
    }
    this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
    this.hiddenField.dom.value = this.getValue();
    this.fireEvent('click', this, e);
    this.validate();       
},

onViewBeforeClick: function(vw, index, node, e) {
    this.preClickSelections = this.view.getSelectedIndexes();
    if (this.disabled) {return false;}
},

onViewDblClick : function(vw, index, node, e) {
    return this.fireEvent('dblclick', vw, index, node, e);
}, 

getValue: function(valueField){
    var returnArray = [];
    var selectionsArray = this.view.getSelectedIndexes();
    if (selectionsArray.length == 0) {return '';}
    for (var i=0; i<selectionsArray.length; i++) {
        returnArray.push(this.store.getAt(selectionsArray[i]).get(((valueField != null)? valueField : this.valueField)));
    }
    return returnArray;
},

setValue: function(values) {
    var index;
    var selections = [];
    this.view.clearSelections();
    this.hiddenField.dom.value = '';

    if (!values || (values == '')) { return; }

    if (!(values instanceof Array)) { values = values.split(this.delimiter); }
    for (var i=0; i<values.length; i++) {
        index = this.view.store.indexOf(this.view.store.query(this.valueField,
            new RegExp('^' + values[i] + '$', "i")).itemAt(0));
        selections.push(index);
    }
    this.view.select(selections);
    this.hiddenField.dom.value = values;
    for (var i=0; i<values.length; i++) {
     this.listOfIndustries=values[i];
     alert(values[i]);
    }
    this.validate();
},   

getRawValue: function(valueField) {
    var tmp = this.getValue(valueField);

    if (!tmp) {

        tmp = [];
    }

    return tmp;
},

setRawValue: function(values){
    setValue(values);
},

validateValue : function(value){
    if (value.length < 1) { // if it has no value
         if (this.allowBlank) {
             this.clearInvalid();
             return true;
         } else {
             this.markInvalid(this.blankText);
             return false;
         }
    }
    if (value.length < this.minLength) {
        this.markInvalid(String.format(this.minLengthText, this.minLength));
        return false;
    }
    if (value.length > this.maxLength) {
        this.markInvalid(String.format(this.maxLengthText, this.maxLength));
        return false;
    }
    return true;
}
});

CQ.Ext.reg("industriesmultiselect", CQ.Ext.form.Multiselect);

CQ.Ext.form.Multiselect=CQ.Ext.extend（CQ.Ext.form.Field{
存储：空，
存储URL:“”，
显示字段：'text'，
valueField:“值”，
allowBlank：是的，
最小长度：0，
blankText:CQ.Ext.form.TextField.prototype.blankText，
副本：假，
allowDup:false，
allowTrash:错，
图例：空，
焦点类：未定义，
分隔符：'，'，
视图：空，
dragGroup:null，
dropGroup:null，
tbar:null，
仅附件：false，
sortField:null，
sortDir:“ASC”，
defaultAutoCreate:{tag:“div”}，
initComponent:function（）{
CQ.Ext.form.Multiselect.superclass.initComponent.call（this）；
这是我的({
“dblclick”：正确，
“单击”：true，
"变":对,，
“drop”：正确
});    
},
onRender：功能（ct、位置）{
var fs、cls、tpl；
CQ.Ext.form.Multiselect.superclass.onRender.call（this，ct，position）；
cls='ux mselect'；
fs=新的CQ.Ext.form.FieldSet({
renderTo:这个.el，
标题：这个传奇，
高度：这个高度，
宽度：这个。宽度，
样式：“填充：1px；”，
tbar：这个。tbar
});
如果（！this.legend）{
//fs.el.down（'.'+fs.headerCls）.remove（）；
fs.body.addClass（cls）；
}
tpl='简短回答：

与使用一个隐藏字段来存储值不同，您需要使用多个底层
input
元素，每个元素都具有Sling Post Servlet相同的
name
属性，以将输出解释为多值属性。请参阅
/libs上的多字段小部件的
setValue
和
addItem
方法/cq/ui/widgets/source/widgets/form/MultiField.js
动态添加新字段的示例

详细解释：

看起来您的
getValue
实现了您的期望，但问题是没有调用该方法来提供提交的值。如果您在标准对话框中使用此小部件，则父窗体面板将提交在DOM层次结构中其下的输入元素中指定的值

换句话说，您需要将多个值应用于DOM元素

您正在扩展的
CQ.Ext.form.Field
只定义了一个底层输入元素，您正试图用
setValue
中的值数组设置该元素：

然后在视图中单击


由于
hiddenField
是一个类型为“hidden”的输入标记，它包含一个字符串值，当您尝试以这种方式进行设置时，实际上是在您的值数组上存储调用
toString（）
的结果。这就是为什么您最终会提交一个逗号分隔的值字符串

如果希望此小部件与标准表单提交基础结构配合使用，则需要维护一整套隐藏字段。或者，您可以在适当的情况下实现自己的提交事件侦听器，并使用Ext或jQuery在数组中发布AJAX请求（直接从
getValue（）
）作为参数之一

this.hiddenField.dom.value = values;

this.hiddenField.dom.value = this.getValue();