1 Reply Latest reply on Apr 9, 2013 7:49 AM by efish11

    how to save values as a string array instead of comma delimited string in a custom xtype

    efish11 Level 1

      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.

       

      Any suggestions, pointers highly appreciated.

       

      Currently it is storing the values as follows

       

      property type    value

      industry String government,healthcare


      Instead, i want to save the information as follows

       

      property  type    value

      industry String[] government,healthcare

       

       

      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