Issue with configuring ExtJS combo box

Question

Issue with configuring ExtJS combo box

While using combos in an input form, I encountered an intriguing issue. The form has combos that retrieve data from JSON stores. Everything works smoothly when adding a new record, but when editing an existing one, the ID sometimes appears selected instead of its corresponding value (for example, '5' instead of "apple"). It seems like the value is being set before the combo finishes loading.

Is there a solution to this problem? Below is the code snippet that creates the combos:

function createDictionaryCombo(store, fieldLabel, hiddenName, name, allowBlank, myTooltip) {
      combo = {
        xtype: 'combo',
        id: 'id-' + name,
        allowBlank: allowBlank,
        fieldLabel: fieldLabel,
        forceSelection: true,
        displayField: 'value',
        valueField: 'id',
        editable: false,
        name: name,
        hiddenName: hiddenName,
        minChars: 2,
        mode: 'remote',
        triggerAction: 'all',
        store: store
     };

    function createDictionaryJson(url) {
      store = new Ext.data.JsonStore({ 
        root: 'results', 
        fields: ['id', 'value'],
        url: url,
        autoLoad: true
      });

      return store;
    }

    var comboKarStore = createDictionaryJson('/service/karok');
    var comboKar = createDictionaryCombo(comboKarStore, 'Kar', 'karid', 'kar', false, '');

    // then comboKar is added to the form

Hubidubi

javascript ajax json extjs

Answer 1

Answer №1

ksjdflmao your approach is quite effective. I personally find using a plugin for my combos to be the best option. Give it a shot, it works flawlessly for me. Simply add the following code snippet to bind it to a combo:

plugins: new Application.plugins.comboloadvalue(),

Add this to your combo configuration object.

Ext.ns('Application.plugins');

Application.plugins.comboloadvalue = Ext.extend(Ext.util.Observable, {
field : null,

init : function(field){
    var self = this;
    this.field = field;
    this.store = field.getStore();
    this.setLoaded(false);

    this.store.on('load', function(){
        return self.onLoad();
    }, this);
},

onLoad : function(){
    if(this.store !== null){
        this.field.setValue(this.field.getValue());
        this.setLoaded(true);
    }
    return true;
},

setLoaded: function(bool){
    this.store.hasOnceLoaded = bool;
},

getLoaded: function(){
    return this.store.hasOnceLoaded;
}

});

Answer 2

ksjdflmao your approach is quite effective. I personally find using a plugin for my combos to be the best option. Give it a shot, it works flawlessly for me. Simply add the following code snippet to bind it to a combo:

plugins: new Application.plugins.comboloadvalue(),

Add this to your combo configuration object.

Ext.ns('Application.plugins');

Application.plugins.comboloadvalue = Ext.extend(Ext.util.Observable, {
field : null,

init : function(field){
    var self = this;
    this.field = field;
    this.store = field.getStore();
    this.setLoaded(false);

    this.store.on('load', function(){
        return self.onLoad();
    }, this);
},

onLoad : function(){
    if(this.store !== null){
        this.field.setValue(this.field.getValue());
        this.setLoaded(true);
    }
    return true;
},

setLoaded: function(bool){
    this.store.hasOnceLoaded = bool;
},

getLoaded: function(){
    return this.store.hasOnceLoaded;
}

});

Answer 3

Answer №2

It is important to remember that stores loading remote data operate asynchronously. Therefore, it is crucial to process the store data within the appropriate callback function to ensure that it is ready for use. For example:

let selectionStore, comboSelectionStore = makeJsonDictionary('/api/selection');

comboSelectionStore.on('load', function(){
    selectionStore = createCombo(selectionStore, 'Selection', 'id', 'name', false, '');
});

Answer 4

It is important to remember that stores loading remote data operate asynchronously. Therefore, it is crucial to process the store data within the appropriate callback function to ensure that it is ready for use. For example:

let selectionStore, comboSelectionStore = makeJsonDictionary('/api/selection');

comboSelectionStore.on('load', function(){
    selectionStore = createCombo(selectionStore, 'Selection', 'id', 'name', false, '');
});

Answer 5

Answer №3

Here is a clever workaround that ensures compatibility with all combinations:

Implement this workaround before loading any combinations (it doesn't have to be after the document is ready)

Ext.form.ComboBox.prototype.nativeSetValue = Ext.form.ComboBox.prototype.setValue;
Ext.form.ComboBox.prototype.setValue=function(v){
   var combo = this;
   if(this.valueField){
      var r = this.findRecord(this.valueField, v);
      if (!r) {
         var data = {}
         data[this.valueField] = v
         this.store.load({
            params:data,
            callback:function(){
               combo.nativeSetValue(v)
            }
         })   

      } else return combo.nativeSetValue(v);
   } else combo.nativeSetValue(v);
}

This functionality checks whether your value exists in your store, and if not, initiates a callback with valueField = value before attempting to set it again. Ensure your serverside handler recognizes "query" for searches and the key field for loads.

Additionally, this method works well with "search" type combos that may have a loaded store but incorrect records.

Answer 6

Here is a clever workaround that ensures compatibility with all combinations:

Implement this workaround before loading any combinations (it doesn't have to be after the document is ready)

Ext.form.ComboBox.prototype.nativeSetValue = Ext.form.ComboBox.prototype.setValue;
Ext.form.ComboBox.prototype.setValue=function(v){
   var combo = this;
   if(this.valueField){
      var r = this.findRecord(this.valueField, v);
      if (!r) {
         var data = {}
         data[this.valueField] = v
         this.store.load({
            params:data,
            callback:function(){
               combo.nativeSetValue(v)
            }
         })   

      } else return combo.nativeSetValue(v);
   } else combo.nativeSetValue(v);
}

This functionality checks whether your value exists in your store, and if not, initiates a callback with valueField = value before attempting to set it again. Ensure your serverside handler recognizes "query" for searches and the key field for loads.

Additionally, this method works well with "search" type combos that may have a loaded store but incorrect records.

Issue with configuring ExtJS combo box

Answer №1

Answer №2

Answer №3

Similar questions

Confidently set up a proxy that is recursively nested and strongly typed

Following the implementation of the YITH ajax navigation filter, my jQuery scripts are no longer functioning as

Returning to the previous page is done by navigating back using the previous URL in Next.js

Is it possible to JSON serialize Django Querysets that have been processed with the values method? I'm curious if there are any

Encountered an issue when trying to add the value "BIT" into MySQL through Nifi PutDatabaseRecord because of a data truncation error

Developing a custom camera system for a top-down RPG game using Javascript Canvas

How can one ensure that the "DataTables" Jquery Plugin has been properly initialized?

Obtaining data with jQuery.Ajax technology

The Vue JS Option element requires the "selected" attribute to be utilized as a property instead

Having trouble displaying real-time camera RTSP streaming using Angular

I am uncertain about whether it would be better to utilize URL path parameters or query parameters for filtering on the back-end of the application

In Bash scripting, it is not possible to replace a command line variable

KnexJS raw query yielding unexpected results

Is it possible to generate a vendor bundle for CSS/Sass in Vue.js CLI 3?

Sending transaction proposals in Hyperledger Fabric involves passing arguments as JSON format when invoking the chaincode using the sendTransactionProposal function

Error Module in Angular 1.4.2: $injector:modulerr

Switch between class and slider photos

Library for adjusting the x axis scaling accurately

How can I create a more spacious and stylish JTextField for my address bar?

When the button is clicked, a modal will pop up