Uploaded image for project: 'Runtime'
  1. Runtime
  2. RUNTIME-4000

Unable to use a idProperty and valueField different for a AbstractQueryableComboBox widget

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 4.8.0
    • None
    • None
    • None
    • 4.8.0 M10

      In a AbstractQueryableComboBox widget, idProperty of the combobox store have to be equals to valueField property. Otherwise #setValue does not work.

      Indeed, in #setValue, we use me.combobox.getStore().getModel().idProperty instead of me.valueField

      setValue: function (value)
    {
        var me = this;
        
    	value = Ext.isEmpty(value) ? [] : Ext.Array.from(value);
        
        // Values can be either String (of id) or the model
        var ids = [];
        Ext.Array.each(value, function(v) {
            if (Ext.isString(v))
            {
                ids.push(v);
            }
            else
            {
                ids.push(v[me.combobox.getStore().getModel().idProperty]);
                me.combobox.getStore().add(v);
            }
        });

    	me.callParent([ids]);
    	me.combobox.setValue(ids);
    }

      Model of combobox store and valueField/displayField should be independant.

      Sample of case, the SelectEducationalPath widget (ODF) does not work with following configuration. It should have.

      Ext.define('Ametys.odf.widget.SelectEducationalPath', {
    extend: 'Ametys.form.AbstractQueryableComboBox',
    
    valueField: 'id',
    displayField: 'title',
    
    getStore: function()
    {
        if (!Ext.data.schema.Schema.get('default').hasEntity('Ametys.odf.widget.EducationalPath')) {
            Ext.define("Ametys.odf.widget.EducationalPath", {
                extend: 'Ext.data.Model',

                idProperty: 'value',

                fields: [
                         {name: 'value', type: 'string'},
                         {name: 'id', type: 'string'},
                         {name: 'title', type: 'string'}
                ]
            });
        }
        
        return Ext.create('Ext.data.Store', {
            model: 'Ametys.odf.widget.EducationalPath',
            proxy: {
                type: 'ametys',
                methodName: 'getEducationalPathsEnumeration',
	            methodArguments: ['programItemId'],
	            role: 'org.ametys.odf.ODFHelper',
	            reader: {
	                type: 'json'
	            }
            },
            
            sorters: [{property: 'title', direction:'ASC'}],
            
            listeners: {
                beforeload: {fn: this._onStoreBeforeLoad, scope: this}
            }
        });
    }

        1. screenshot-1.png
          screenshot-1.png
          11 kB

          [RUNTIME-4000] Unable to use a idProperty and valueField different for a AbstractQueryableComboBox widget

          Laurence Aumeunier made changes -
          Status Original: Resolved [ 5 ] New: Closed [ 6 ]
          Laurence Aumeunier made changes -
          Resolution New: Fixed [ 1 ]
          Status Original: Ready to merge [ 10208 ] New: Resolved [ 5 ]
          Raphaël Franchet made changes -
          Assignee New: Laurence Aumeunier [ laurence ]
          Raphaël Franchet made changes -
          Status Original: Functional review OK [ 10207 ] New: Ready to merge [ 10208 ]
          Magali Franchet made changes -
          Status Original: Available for review [ 10005 ] New: Functional review OK [ 10207 ]
          Laurence Aumeunier made changes -
          Sprint New: 4.8.0 M10 [ 95 ]
          Laurence Aumeunier made changes -
          Fix Version/s New: 4.8.0 [ 17980 ]
          Laurence Aumeunier made changes -
          Status Original: Open [ 1 ] New: Available for review [ 10005 ]
          Laurence Aumeunier made changes -
          Description Original: In a AbstractQueryableComboBox widget, idProperty of the combobox store have to be equals to {{valueField}} property. Otherwise #setValue does not work.

          Indeed, in #setValue, we use {{me.combobox.getStore().getModel().idProperty}} instead of {{me.valueField}}

          {code}
          setValue: function (value)
              {
                  var me = this;
                  
               value = Ext.isEmpty(value) ? [] : Ext.Array.from(value);
                  
                  // Values can be either String (of id) or the model
                  var ids = [];
                  Ext.Array.each(value, function(v) {
                      if (Ext.isString(v))
                      {
                          ids.push(v);
                      }
                      else
                      {
                          ids.push(v[me.combobox.getStore().getModel().idProperty]);
                          me.combobox.getStore().add(v);
                      }
                  });

               me.callParent([ids]);
               me.combobox.setValue(ids);
              }
          {code}

          Model of combobox store and valueField/displayField should be independant.

          Sample of case, the SelectEducationalPath widget (ODF) does not work with following configuration. It should have.

          {code}
          Ext.define('Ametys.odf.widget.SelectEducationalPath', {
              extend: 'Ametys.form.AbstractQueryableComboBox',
              
              valueField: 'id',
              displayField: 'title',
              
              getStore: function()
              {
                  if (!Ext.data.schema.Schema.get('default').hasEntity('Ametys.odf.widget.EducationalPath')) {
                      Ext.define("Ametys.odf.widget.EducationalPath", {
                          extend: 'Ext.data.Model',

                          idProperty: 'value',

                          fields: [
                                   {name: 'value', type: 'string'},
                                   {name: 'label', type: 'string'}
                          ]
                      });
                  }
                  
                  return Ext.create('Ext.data.Store', {
                      model: 'Ametys.odf.widget.EducationalPath',
                      proxy: {
                          type: 'ametys',
                          methodName: 'getEducationalPathsEnumeration',
          methodArguments: ['programItemId'],
          role: 'org.ametys.odf.ODFHelper',
          reader: {
          type: 'json'
          }
                      },
                      
                      sorters: [{property: 'label', direction:'ASC'}],
                      
                      listeners: {
                          beforeload: {fn: this._onStoreBeforeLoad, scope: this}
                      }
                  });
              }
          {code}


          		New: In a AbstractQueryableComboBox widget, idProperty of the combobox store have to be equals to {{valueField}} property. Otherwise #setValue does not work.

          Indeed, in #setValue, we use {{me.combobox.getStore().getModel().idProperty}} instead of {{me.valueField}}

          {code}
          setValue: function (value)
              {
                  var me = this;
                  
               value = Ext.isEmpty(value) ? [] : Ext.Array.from(value);
                  
                  // Values can be either String (of id) or the model
                  var ids = [];
                  Ext.Array.each(value, function(v) {
                      if (Ext.isString(v))
                      {
                          ids.push(v);
                      }
                      else
                      {
                          ids.push(v[me.combobox.getStore().getModel().idProperty]);
                          me.combobox.getStore().add(v);
                      }
                  });

               me.callParent([ids]);
               me.combobox.setValue(ids);
              }
          {code}

          Model of combobox store and valueField/displayField should be independant.

          Sample of case, the SelectEducationalPath widget (ODF) does not work with following configuration. It should have.

          {code}
          Ext.define('Ametys.odf.widget.SelectEducationalPath', {
              extend: 'Ametys.form.AbstractQueryableComboBox',
              
              valueField: 'id',
              displayField: 'title',
              
              getStore: function()
              {
                  if (!Ext.data.schema.Schema.get('default').hasEntity('Ametys.odf.widget.EducationalPath')) {
                      Ext.define("Ametys.odf.widget.EducationalPath", {
                          extend: 'Ext.data.Model',

                          idProperty: 'value',

                          fields: [
                                   {name: 'value', type: 'string'},
                                   {name: 'id', type: 'string'},
                                   {name: 'title', type: 'string'}
                          ]
                      });
                  }
                  
                  return Ext.create('Ext.data.Store', {
                      model: 'Ametys.odf.widget.EducationalPath',
                      proxy: {
                          type: 'ametys',
                          methodName: 'getEducationalPathsEnumeration',
          methodArguments: ['programItemId'],
          role: 'org.ametys.odf.ODFHelper',
          reader: {
          type: 'json'
          }
                      },
                      
                      sorters: [{property: 'title', direction:'ASC'}],
                      
                      listeners: {
                          beforeload: {fn: this._onStoreBeforeLoad, scope: this}
                      }
                  });
              }
          {code}


          Laurence Aumeunier made changes -
          Attachment New: screenshot-1.png [ 29464 ]

            laurence Laurence Aumeunier
            laurence Laurence Aumeunier
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: