0

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

目前它存储的值如下

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

相反，我想按如下方式保存信息

房地产行业 类型 String[] 取值 政府、医疗保健

任何建议，指针高度赞赏。

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 5.5

4

1 回答 1

1

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

更长的解释：
看起来你getValue做了你所期望的，但问题是该方法没有被调用来提供提交的值。如果您在标准对话框中使用此小部件，则父表单面板将提交在 DOM 层次结构中其下方的输入元素中指定的值。

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

CQ.Ext.form.Field您正在扩展的仅定义了一个基础输入元素，您尝试使用以下值数组设置该元素setValue： 

this.hiddenField.dom.value = values;

并且在onViewClick 

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

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

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

于 2013-07-14T12:56:57.050 回答