extjs - save values as a string array instead of comma delimited string in a custom xtype CQ5 -

i have created custom xtype multiselect, not able understand changes need perform save values string array instead of comma delimited string.

currently storing values follows

property industry type string value government,healthcare

instead, want save information 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 '';}     (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); }     (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;     (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 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

short answer:
instead of using 1 hidden field store values, need use multiple underlying input elements, each having same name property sling post servlet interpret output multi-valued property. see multifield widget's setvalue , additem methods @ /libs/cq/ui/widgets/source/widgets/form/multifield.js example of dynamically adding new fields.

longer explanation:
looks getvalue expect, problem that method isn't getting called provide value gets submitted. if you're using widget in standard dialog, parent form panel submits values specified in input elements beneath in dom hierarchy.

in other words, need apply multiple values dom elements.

the cq.ext.form.field you're extending defines 1 underlying input element, you're trying set values array in setvalue:

this.hiddenfield.dom.value = values; 

and in onviewclick

this.hiddenfield.dom.value = this.getvalue(); 

since hiddenfield input tag of type 'hidden', holds string value , when try set way, you're storing result of calling tostring() on values array. why end 1 string of comma separated values getting submitted.

you'll need maintain whole set of hidden fields if want widget work standard form submission infrastructure. alternatively, implement own submit event listener wherever appropriate , use ext or jquery post ajax request array (directly getvalue()) 1 of parameters.