Results 1 to 3 of 3

Thread: [BUG]. combobox load store on setValue()

  1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    64
    Answers
    5
    Vote Rating
    2
      0  

    Default Answered: [BUG]. combobox load store on setValue()

    Hi Sencha,
    I have the following issue:
    I have a combobox.
    The combobox has a remote store
    combobox.setValue(<id>) is called.
    To display proper displayField the combobox needs to load the model record for the set <id> .
    ExtJs code loads the store for the combobox, if it has not been loaded.
    If a record in the store matches the <id>, then it is used as a value, and the correct displayField is shown.

    The problem is that the store can be paginated. If the <id> is not in the first page, then the record is not loaded, and displayField is not shown in the combobox.

    This is not proper.
    This is basic functionality.
    Please fix it.

    The combobox should call store.model.load(<id>) and use that record to display selected field.

  2. I didn't find what I am looking for.
    I made an override, that should work, at least for my scenario
    Here is the code, in case someone else bumps into the same issue

    Utility functions for Ext.data.Model
    Code:
    Ext.define('exp6.model.BaseModel', {
      extend: "Ext.data.Model",
      alias: "model.baseModel",
    
      getStoreFilters () {
        return this.self.storeFilters
      },
    
      inheritableStatics: {
        promisifyLoad: function (id) {
          return new Promise((resolve, reject) => {
            this.load(id, {
              callback: function (record, operation, success) {
                if (success) {
                  resolve({
                    record,
                    operation
                  })
                } else {
                  const error = operation.getError()
                  reject(exp6.E.newError({
                    error,
                    record,
                    operation
                  }))
                }
              }
            })
          })
        }
      },
    
      promisifySave: function () {
        return new Promise((resolve, reject) => {
          this.save({
            callback: function (record, operation, success) {
              if (success) {
                resolve({
                  record,
                  operation
                })
              } else {
                const error = operation.getError()
                reject(exp6.E.newError({
                  error,
                  record,
                  operation
                }))
              }
            }
          })
        })
      },
    
      promisifyErase: function () {
        return new Promise((resolve, reject) => {
          this.erase({
            callback: function (record, operation, success) {
              if (success) {
                resolve({
                  record,
                  operation
                })
              } else {
                const error = operation.getError()
                reject(exp6.E.newError({
                  error,
                  record,
                  operation
                }))
              }
            }
          })
        })
      }
    })
    Override for combobox
    Code:
    Ext.define('exp6.overrides.ComboBox', {
      override: 'Ext.form.field.ComboBox',
    
      setValueWithEvent(value) {
        let me = this
        me.setValue(value);
        me.fireEvent('select', me, value)
      },
    
      getValueRecord() {
        const value =  this.getValue()
        if (!value) {
          return null
        }
    
        return this.store.findRecord(this.valueField, value)
      },
    
      /**
       * Remote load the record for a foreign key, if it is not present in the current store page. (common scenario)
       * @param value
       * @param add
       */
      doSetValue (value, add) {
        const me = this
        const store = me.getStore()
        me.callParent(arguments)
    
        if (
          !add &&
          store &&
          !Ext.isObject(value) &&
          !me.store.hasPendingLoad() &&
          !me.getValueRecord() &&
          !Ext.isArray(value) &&
          store.model.proxy.type === 'rest'
        ) {
          const model = me.store.model
          model.promisifyLoad(value).then(({record}) => {
            me.doSetValue(record)
          })
        }
      }
    
    })

  3. #2
    Sencha User
    Join Date
    Jul 2017
    Posts
    39
    Answers
    5
    Vote Rating
    6
      0  

    Default

    Is this problem similar to what you're experiencing? If so a simple override will fix it,
    Code:
    Ext.override(Ext.form.field.ComboBox,{
        findRecord:function(field, value){
            var foundRec =null;
            Ext.each(this.lastSelection,function(rec){
                if(rec.get(field)=== value){
                    foundRec = rec;
                    returnfalse;// stop 'each' loop
                }
            });
            if(foundRec){
                return foundRec;
            }else{
                returnthis.callParent(arguments);
            }
        }
    });
    



  4. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    64
    Answers
    5
    Vote Rating
    2
      1  

    Default

    I didn't find what I am looking for.
    I made an override, that should work, at least for my scenario
    Here is the code, in case someone else bumps into the same issue

    Utility functions for Ext.data.Model
    Code:
    Ext.define('exp6.model.BaseModel', {
      extend: "Ext.data.Model",
      alias: "model.baseModel",
    
      getStoreFilters () {
        return this.self.storeFilters
      },
    
      inheritableStatics: {
        promisifyLoad: function (id) {
          return new Promise((resolve, reject) => {
            this.load(id, {
              callback: function (record, operation, success) {
                if (success) {
                  resolve({
                    record,
                    operation
                  })
                } else {
                  const error = operation.getError()
                  reject(exp6.E.newError({
                    error,
                    record,
                    operation
                  }))
                }
              }
            })
          })
        }
      },
    
      promisifySave: function () {
        return new Promise((resolve, reject) => {
          this.save({
            callback: function (record, operation, success) {
              if (success) {
                resolve({
                  record,
                  operation
                })
              } else {
                const error = operation.getError()
                reject(exp6.E.newError({
                  error,
                  record,
                  operation
                }))
              }
            }
          })
        })
      },
    
      promisifyErase: function () {
        return new Promise((resolve, reject) => {
          this.erase({
            callback: function (record, operation, success) {
              if (success) {
                resolve({
                  record,
                  operation
                })
              } else {
                const error = operation.getError()
                reject(exp6.E.newError({
                  error,
                  record,
                  operation
                }))
              }
            }
          })
        })
      }
    })
    Override for combobox
    Code:
    Ext.define('exp6.overrides.ComboBox', {
      override: 'Ext.form.field.ComboBox',
    
      setValueWithEvent(value) {
        let me = this
        me.setValue(value);
        me.fireEvent('select', me, value)
      },
    
      getValueRecord() {
        const value =  this.getValue()
        if (!value) {
          return null
        }
    
        return this.store.findRecord(this.valueField, value)
      },
    
      /**
       * Remote load the record for a foreign key, if it is not present in the current store page. (common scenario)
       * @param value
       * @param add
       */
      doSetValue (value, add) {
        const me = this
        const store = me.getStore()
        me.callParent(arguments)
    
        if (
          !add &&
          store &&
          !Ext.isObject(value) &&
          !me.store.hasPendingLoad() &&
          !me.getValueRecord() &&
          !Ext.isArray(value) &&
          store.model.proxy.type === 'rest'
        ) {
          const model = me.store.model
          model.promisifyLoad(value).then(({record}) => {
            me.doSetValue(record)
          })
        }
      }
    
    })

Similar Threads

  1. Combobox: setValue happens before store is loaded?
    By hallikpapa in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 10 Jul 2016, 3:00 AM
  2. ComboBox setValue and loaded store
    By d.zucconi in forum Ext 5: Q&A
    Replies: 0
    Last Post: 19 Nov 2015, 3:19 AM
  3. Field setValue before store.load()
    By Nikkelmann in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 16 Aug 2011, 10:22 PM
  4. [SOLVED] ComboBox SetValue from FormPanel Load
    By maquejp in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 Jul 2008, 3:04 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •