2013-04-08 32 views
0

我为multiselect创建了一个自定义xtype,但我无法理解需要执行哪些更改以将值保存为字符串数组逗号分隔的字符串。将值保存为字符串数组而不是逗号分隔的字符串在自定义xtype中CQ5

目前,它存储的值如下

物业行业 类型字符串 政府,医疗

相反,我要保存的信息如下

属性行业类型的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); 

Envionment CQ 5.5

回答

1

简短的回答:
而不是使用一个隐藏字段来存储你的价值观,你需要使用多种基础input元素,每个具有相同name属性为Sling Post Servlet将输出解释为多值属性。有关动态添加新字段的示例,请参阅/libs/cq/ui/widgets/source/widgets/form/MultiField.js的多字段控件的setValueaddItem方法。

更详细的解释:
它看起来像你的getValue做你所期望的,但问题是,这种方法是没有得到所谓的以提供被提交的值。如果您在标准对话框中使用此小部件,则父级表单面板将在DOM层次结构中提交在其下面的输入元素中指定的值。

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

CQ.Ext.form.Field,你只扩展定义了一个潜在的输入元素,你想在setValue与你的价值观阵列设置:

this.hiddenField.dom.value = values; 

onViewClick

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

由于hiddenField是一个'hidden'类型的输入标签,它包含一个字符串值,当你试图以这种方式设置它时,实际上存储了调用的结果在你的values数组上。这就是为什么你最终得到一串逗号分隔值被提交。

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

相关问题