I have created a custom xtype for multiselect, but i am not able to understand what changes i need to perform to save the values as a string array instead of comma delimited string.
Currently it is storing the values as follows
Property industry Type String Value government,healthcare
Instead, i want to save the information as follows
Property industry Type String[] Value government,healthcare
Any suggestions, pointers highly appreciated.
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