title: save values as a string array instead of comma delimited string in a custom xtype CQ5
body: <p>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.</p>
  
  <p>Currently it is storing the values as follows</p>
  
  <p><strong>Property</strong> industry
  <strong>Type</strong>     String
  <strong>Value</strong>    government,healthcare</p>
  
  <p>Instead, i want to save the information as follows</p>
  
  <p><strong>Property</strong> industry
  <strong>Type</strong>     String[]
  <strong>Value</strong>    government,healthcare</p>
  
  <p>Any suggestions, pointers highly appreciated.</p>
  
  <pre><code>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 = '&lt;tpl for="."&gt;&lt;div class="' + cls + '-item';
      if(CQ.Ext.isIE || CQ.Ext.isIE7 || CQ.Ext.isOpera )tpl+='" unselectable=on';
      else tpl+=' x-unselectable"';
      tpl+='&gt;{' + this.displayField + '}&lt;/div&gt;&lt;/tpl&gt;';
  
  
       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&lt;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&lt;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&lt;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 &lt; 1) { // if it has no value
           if (this.allowBlank) {
               this.clearInvalid();
               return true;
           } else {
               this.markInvalid(this.blankText);
               return false;
           }
      }
      if (value.length &lt; this.minLength) {
          this.markInvalid(String.format(this.minLengthText, this.minLength));
          return false;
      }
      if (value.length &gt; this.maxLength) {
          this.markInvalid(String.format(this.maxLengthText, this.maxLength));
          return false;
      }
      return true;
  }
  });
  
  CQ.Ext.reg("industriesmultiselect", CQ.Ext.form.Multiselect);
  </code></pre>
  
  <p>Envionment CQ 5.5</p>