Question

我为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 5.5

Answer 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是'hidden'类型的输入标记，因此它包含一个字符串值，当您尝试以这种方式设置它时，实际上是存储了调用toString()的结果值数组。这就是为什么你最终得到一串逗号分隔值提交。

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

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

1 个答案: