1. #41
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135
    Vote Rating
    0
    gelleneu is on a distinguished road

      0  

    Default Problems with values

    Problems with values


    Yesterday I tested this Extension the first time. I decided to change from BoxSelect because this is already buggy.

    But I have some problems:

    1.) I only get the texts as Value from the field - like this: tags: 'news, politics, sport, '.
    But I want to have the underlying id numbers from the store: '12, 17, 45'...

    I have a normal combo-typical config, with valueField='id' and displayField='text'.

    Where are the Id's stored?

  2. #42
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    322
    Vote Rating
    4
    Scorpie is on a distinguished road

      0  

    Default


    Very nice indeed!
    I`m from Holland!

  3. #43
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Quote Originally Posted by gelleneu View Post
    But I have some problems:

    1.) I only get the texts as Value from the field - like this: tags: 'news, politics, sport, '.
    But I want to have the underlying id numbers from the store: '12, 17, 45'...

    I have a normal combo-typical config, with valueField='id' and displayField='text'.

    Where are the Id's stored?
    I recently gave Richard an update, that among other things, provides an appropriate getValue override to do just this. I believe he is going to post it on the ext-ux repository within a few days.

    http://extjs-ux.org/docs/


    Cheers,
    Jerry

  4. #44
    Ext User
    Join Date
    Nov 2008
    Posts
    3
    Vote Rating
    0
    mfiandesio is on a distinguished road

      0  

    Default Putting user value

    Putting user value


    Very nice extension.
    I am facing some problems when i want to insert a value that is not in the store.
    Does anyone tried that?
    Thank you
    Matteo

  5. #45
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    cool.akshay is on a distinguished road

      0  

    Default Multiselect

    Multiselect


    please do help in Multiselect, i have question to show selected field in multiselect on edit, have a data which is come from JsonReader, want to apply this to multiselect control to show respective field selected.........

    Thanks in advanced............

  6. #46
    Sencha User Zyclops's Avatar
    Join Date
    Jul 2007
    Location
    Adelaide, South Australia
    Posts
    154
    Vote Rating
    0
    Zyclops is on a distinguished road

      0  

    Default


    The current issue i have are:
    * Field Label doesn't seem to work
    * It seems to require the use of the id field for other things than just specify a reference to the object

    We've used this in about 30 places and so fixed
    * Loading Issues (covering different scenarios)
    * Set the delimiter
    * Fixes to clearValue

    Code:
    Ext.namespace('Ext.ux');
     
    /**
      * Ext.ux.MultiSelectTextField Extension Class
      *
      * @author Richard Livsey
      * @version 0.0.3
      *
      * @class Ext.ux.MultiSelectTextField
      * @extends Ext.form.ComboBox
      * @constructor
      * @param {Object} config Configuration options
      */
    Ext.ux.MultiSelectTextField = function(config) {
     
        // init data
        this.values         = [];
        this.displayValues  = [];
        this.hiddenFields   = [];
        if (config.delimiter === undefined) {
          this.delimiter = ',';
        } else {
          this.delimiter = config.delimiter;
        }
        Ext.ux.MultiSelectTextField.superclass.constructor.call(this, config);
    };
     
    Ext.extend(Ext.ux.MultiSelectTextField, Ext.form.ComboBox, {
     
      /**
       * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to true)
       */
      hideTrigger: true,
      
      // private
      values: [],
      
      // private
      displayValues: [],
      
      // private
      hiddenFields: [],
      
      /**
       * Add a value
       * @param {String} value The value to match
       * @param {Boolean} defer True to not update the field
       */
      addValue: function(v, defer)
      {
        var r = this.findRecord(this.valueField || this.displayField, v);
        if (!r)
        {
          return;
        }
        
        var value = r.data[this.valueField];
        var text  = r.data[this.displayField];
        
        // only if the value hasn't already been added
        if (this.values.indexOf(value) == -1)
        { 
          var hidden = this.el.insertSibling(
                        { tag:'input', 
                          type:'hidden', 
                          value: value,
                          name: (this.hiddenName || this.name)}, 
                        'before', true);
          
          this.values.push(value);
          this.displayValues.push(text);
          this.hiddenFields.push(hidden);
        }
        
        if (!defer)
        {
          this.updateDisplay();
        }
      },
      
      /**
       * Remove a value
       * @param {String} value The value to match
       */
      removeValue: function(v, defer)
      {  
        var r = this.findRecord(this.valueField || this.displayField, v);
        if (!r)
        {
          return;
        }
        
        var value = r.data[this.valueField];
        var text  = r.data[this.displayField];
    
        var idx = this.values.indexOf(value);
        if (idx == -1)
        {
          return;
        }
        
        this.removeItemAtIndex(idx);
        
        if (!defer)
        {
          this.updateDisplay();
        }
      },
    
      // private
      removeItemAtIndex: function(idx, defer)
      {
        var field = Ext.get(this.hiddenFields[idx]); 
        field.remove();
        
        this.values[idx]        = null;
        this.displayValues[idx] = null;
        this.hiddenFields[idx]  = null;
        
        if (!defer)
        {
          this.cleanData();
        }
      },
    
      // private
      cleanData: function()
      {
        this.values         = this.cleanArray(this.values);
        this.displayValues  = this.cleanArray(this.displayValues);
        this.hiddenFields   = this.cleanArray(this.hiddenFields); 
      },
      
      // private  
      cleanArray: function(arr)
      {
        var cleaned = [];
        var len = arr.length;
        for (var i=0; i<len; i++)
        {
          if (arr[i])
          {
            cleaned.push(arr[i]);
          }
        }    
        return cleaned;
      },
      
      /**
       * Sets the specified value(s) into the field. 
       * If the value(s) finds a match, they will be added to the field.
       * @param {Mixed} value The value to match
       * @param {Mixed}
       *
       * If you pass in an array of hashes, then we will assume this is to populate the store. It is
       * important that the store has the fields defined for the population (i.e. in a JsonStore configuration
       * you will have to add them.
       *
       * [
       *   {id: '12345', name: 'Fred Joans'},
       *   {id: '15689', name: 'Jeremy Watson'}
       * ]
       *
       * This will then populate the store with those values and then iterate through each item and call set value
       * on whatever the fields valueField is set too
       */
      setValue: function(v) {
        this.clearValue();
        
        if (!(v instanceof Array)) {
          v = v.split(this.delimiter);
        }
        
        var len = v.length;
    
        // Loads the store if the passed object is an array of hashes
        if (typeof(v[0]) === 'object') {
          this.store.loadData(v);
        }
       
        for (var i=0; i<len; i++) {
          //Either searches through the object calling add value on the current valueField
          //or just sets addValue
          if (typeof(v) === 'object') {
            this.addValue(v[i][this.valueField], true);
          } else {
          this.addValue(v[i], true);
        }
        }
        
        this.updateDisplay();
      },
      
      // private
      onBlur: function()
      {
        this.updateDisplay();
        Ext.form.ComboBox.superclass.onBlur.call(this);
      },
      
      // private
      updateDisplay: function()
      {
        var text = this.displayValues.join(this.delimiter + ' ');
        if (text.trim() !== '')
        {
          text += this.delimiter + ' ';
        }
          
        Ext.form.ComboBox.superclass.setValue.call(this, text);    
      },
      
      /**
       * Clears any value(s) currently set in the field
       */
      clearValue : function()
      {
        this.values = [];
        this.value = '';
        this.displayValues = [];
        
        var len = this.hiddenFields.length;
        for (var i=0; i<len; i++)
        {
          Ext.get(this.hiddenFields[i]).remove();
        }
        this.hiddenFields = [];
        
        //
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
      },
      
      // private
      onSelect : function(record, index)
      {
        if (this.fireEvent('beforeselect', this, record, index) !== false){
          this.addValue(record.data[this.valueField || this.displayField]);
          this.collapse();
          this.fireEvent('select', this, record, index);
        }
      },
        
      // private
      onRender : function(ct, position)
      {
        Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
            
        // prevent input submission
        this.el.dom.removeAttribute('name');
        
        if (Ext.isGecko)
        {
          this.el.dom.setAttribute('autocomplete', 'off');
        }
    
        if (!this.lazyInit)
        {
          this.initList();
        }
        else
        {
          this.on('focus', this.initList, this, {single: true});
        }
    
        if (!this.editable)
        {
          this.editable = true;
          this.setEditable(false);
        }
      },
      
      // private
      getLastValue: function()
      {
        var parts = this.getRawValue().split(this.delimiter);
        return parts[parts.length - 1].trim();
      },
      
      // private
      // Implements the default empty TriggerField.onTriggerClick function
      onTriggerClick : function()
      {
        if (this.disabled)
        {
          return;
        }
        
        if (this.isExpanded())
        {
          this.collapse();
          this.el.focus();
        }
        else
        {
          this.onFocus({});
          if (this.triggerAction == 'all') 
          {
            this.doQuery(this.allQuery, true);
          } 
          else
          {
            this.doQuery(this.getLastValue());
          }
          this.el.focus();
        }
      },
      
      //private
      initQuery : function()
      {
        var val = this.getLastValue();
        if (val.trim() !== '')
        {
          this.doQuery(val);
        }
        this.removeOld();
      },
      
      // private
      // clean out the data from ones you've deleted
      removeOld: function()
      {
        var str   = this.getRawValue();  
        var len   = this.displayValues.length;
        // sorted by length descending
        var items = this.displayValues.slice().sort(function(x,y){ return y.length - x.length; });
        var removed = false;
        
        for (var i=0; i<len; i++)
        {
          var val = items[i];
          if (str.indexOf(val) == -1)
          {
            removed = true;
            this.removeItemAtIndex(this.displayValues.indexOf(val), true);
          }
        }
    
        if (removed)
        {
          this.cleanData();
          this.updateDisplay();
        }
      },
      
      // private
      fieldParts: function()
      {
        var parts = this.getRawValue().split(this.delimiter);
        var len = parts.length;
        for (var i=0; i<len; i++)
        {
          parts[i] = parts[i].trim();
        }
        return parts;
      },
      
      //private
      onLoad : function()
      {
        if (!this.hasFocus)
        {
          return;
        }
        
        if (this.store.getCount() > 0)
        {
          this.expand();
          this.restrictHeight();
          
          if (this.lastQuery == this.allQuery)
          {  
            /*
              if (this.editable)
              {
                this.el.dom.select();
              }
            */
            if (!this.selectByValue(this.value, true))
            {
              this.select(0, true);
            }
          }
          else
          {
            this.selectNext();
            if (this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE)
            {
              this.taTask.delay(this.typeAheadDelay);
            }
          }
        }
        else
        {
          this.onEmptyResults();
        }
        //this.el.focus();
      },
      
      validateValue:function(value)
      {  
        if (this.values.length === 0 && !this.allowBlank)
        {
          this.markInvalid(this.blankText);
          return false;
        }
        
        if (this.values.length < this.minLength)
        {
          this.markInvalid(String.format(this.minLengthText, this.minLength));
          return false;
        }
        
        if (this.values.length > this.maxLength)
        {
          this.markInvalid(String.format(this.maxLengthText, this.maxLength));
          return false;
        }
        
        return true;
      }
      
    });
    
    Ext.reg('multitextfield', Ext.ux.MultiSelectTextField);

  7. #47
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    cmendez21 is on a distinguished road

      0  

    Default ISSUE on blur

    ISSUE on blur


    I have an issue on 2.3.0 and 3.x versions

    when i wrote the values (select multiple values) the first time the field values were ok then i leave the field and the values still ok but if wanted to add a new value to that selection the field only leave the new value

    Also If i get again the focus and leave without any changes then the text and values were cleared.

    I assume that was the something to do on the combo source code beforeBlur function

    Any ideas ?

    cause for the moment I added this code

    Code:
    beforeBlur:function(){  },
    to override the combo beforeBlur function
    E2CS: Extjs - Event calendar solution | XtPrinter
    Calendar Thread | XtPrinter Thread| Blog

  8. #48
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    thrillhouse is on a distinguished road

      0  

    Default


    Quote Originally Posted by cmendez21 View Post
    I have an issue on 2.3.0 and 3.x versions

    when i wrote the values (select multiple values) the first time the field values were ok then i leave the field and the values still ok but if wanted to add a new value to that selection the field only leave the new value

    Also If i get again the focus and leave without any changes then the text and values were cleared.

    I assume that was the something to do on the combo source code beforeBlur function

    Any ideas ?

    cause for the moment I added this code

    Code:
    beforeBlur:function(){  },
    to override the combo beforeBlur function
    I believe I'm experiencing the same issue running 2.3. Overriding the beforeBlur function appears to yield the desired result. Has anyone else rolled with this override as a solution and have any wisdom to offer? cmendez21 has this worked ok for you?

    Does anyone know if this plugin is still being actively developed?

  9. #49
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    cmendez21 is on a distinguished road

      0  

    Default


    Quote Originally Posted by thrillhouse View Post
    I believe I'm experiencing the same issue running 2.3. Overriding the beforeBlur function appears to yield the desired result. Has anyone else rolled with this override as a solution and have any wisdom to offer? cmendez21 has this worked ok for you?

    Does anyone know if this plugin is still being actively developed?
    yes indeed has worked out for me the only issue it's i have to let the store (if remote) finish loading before setting any value except from that its working fine (im using it on 3 production environments right now, which 2 of them are quite big (200+ users))
    E2CS: Extjs - Event calendar solution | XtPrinter
    Calendar Thread | XtPrinter Thread| Blog

  10. #50
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    thrillhouse is on a distinguished road

      0  

    Default


    Thanks buddy, I wasted 4 hours on that problem till I found your thread.