Setting a default value for a combobox in ExtJs 3

Being relatively new to ExtJS, only a few weeks in, please excuse the simplicity of my question.

My task involves populating a combo box (SourceSystem) with a list of values based on the selection made in another combo box (DeliveryMethod). Both combos use JSON stores.

To achieve this, I have implemented a listener on combobox 2 as shown below:

listeners:{
     'select': function(combo, record,index) {
      selectedDelMethod = record.data.codeValue;
      var srcSystem = Ext.getCmp('sourceSystemCombo');
      srcSystem.reset();
      srcSystem.store.reload({ 
      params: {
        attrID: 3002,
        delvMethod: selectedDelMethod

        }
      });        
   }

The above code successfully loads different lists into the srcSystem.store based on selectedDelMethod. However, upon loading the SourceSystem combo box, the default value is not displayed.

fieldLabel:     'Source System',
id:        'sourceSystemCombo',
xtype:          'combo',
mode:           'local',
triggerAction:  'all',
forceSelection: true,
editable:       false,
name:           'sourceSystem',
displayField:   'shortDescription',
valueField:     'codeValue',
hiddenName:     'sourceSystem',
store:          sourceSystemStore,  
listeners: {
   'afterrender': function(combo){
    var selectedRecord = combo.getStore().getAt(0);
    combo.setValue(selectedRecord);        
  }
}

I am aware that I must be overlooking something in the afterrender listener. Could you kindly guide me on how to set the first value as the default value?

javajavascriptextjs

Answer №1

While working on my code, I encountered an issue where the combo.getStore().getAt(0) method was returning null. After experimenting with different approaches, I was able to successfully solve the problem. Instead of adding an event listener to the combobox, I made changes to the store reload function to ensure that the first value in the combo is set correctly. Below is the updated code snippet:

var srcSystem = Ext.getCmp('sourceSystemCombo');
srcSystem.reset();
srcSystem.store.reload({ 
    params: {
        attrID:     3002,
        delvMethod: selectedDelMethod
    },
    scope : this,
    callback : function(records, operation, success){
        srcSystem.setValue(srcSystem.store.getAt(0).get('codeValue'));
    }
});

It's important to note that setting the value on the combobox needs to be done within a callback function on the store, as the loading of the store is an asynchronous process. For more information, you can refer to this documentation.

Answer №2

Consider utilizing
this.fireEvent('select',combo,selectedRecord) as an alternative to
combo.setValue(selectedRecord);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve properties from a superclass in Typescript/Phaser?

Within my parent class, I have inherited from Phaser.GameObjects.Container. This parent class contains a property called InformationPanel which is of a custom class. The container also has multiple children of type Container. I am attempting to access the ...

javascripttypescriptphaser-frameworkparceljs

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

I recently set up a new Next.js app using the command npx create-next-app. After that, I added Sass to my project with yarn add sass and proceeded to run it with yarn dev. To my surprise, I encountered multiple errors in both my terminal and on localhost. ...

javascriptreactjsnext.js

What is the best way to monitor different selections to keep track of their state?

In a certain scenario, a user is presented with three options: They can select the body_type of a car, the car_year it was manufactured, or the car_make. Initially, there is a state called carJson which contains a list of cars. "2": { " ...

javascriptreactjsnext.js

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...

javascriptjqueryhtmlcssfixed

leveraging express.js middleware alongside jwt and express-jwt for secured authentication in express framework

I am encountering an issue while using the express-jwt to create a custom middleware. The error message persists as follows: app.use(expressJwt({ secret: SECRET, algorithms: ['HS256']}).unless({path: ['/login', '/']})); ...

javascriptnode.jsexpressexpress-jwt

Troubleshooting: Issues with executing a PHP script from jQuery

I found the source code on this website: It's an amazing resource, but I'm facing an issue where my JavaScript doesn't seem to be executing the PHP script... When I set a breakpoint in Chrome's debugger before the penultimate line (}) ...

phpjavascriptjquerymysql

Text field suddenly loses focus upon entering a single character

In my current code, I have functions that determine whether to display a TextField or a Select component based on a JSON value being Text or Select. However, I am facing an issue where I can only enter one letter into the TextField before losing focus. Sub ...

javascriptreactjsmaterial-ui

Implementing image rendering in JAVA following pixel modifications

Currently, I am facing an issue with a JAVA program that is designed to extract data from an image and save it into a text file. The program should also modify the image by turning all pixels black in every 25th row and display the updated image. However, ...

javapixelbufferedimage

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

Hold off on compiling the Angular directive template until the function has finished executing

I created an angular directive that dynamically displays an image on my webpage based on the value in a querystring within the URL: app.directive('myDirective', function(myService) { return { restrict: 'A', replace: ...

javascriptangularjsangularjs-scopeangular-directive

JavaScript issue: New div element is not being added after the final row of items

I have a script that is supposed to insert a div after each row of elements, but I'm encountering an issue where it doesn't add the div after the last row if it's not full of elements (i.e. if the row only has 1 or 2 elements). However, if t ...

javascriptjquery

Instructions on how to simplify and tone down the ridiculousness of writing the above phrase

It just doesn't make sense to me. Do you think using an array would be a better approach, or is there another solution that might work more efficiently? $('.hoursRange').change(function() { if ('0' == $(this).val()) { ...

javascriptjquery

Dealing with multiple submit buttons in a form with Angular JS: best practices

I'm using AngularJS and I have a form where the user can enter data. At the end of the form I want to have two buttons, one to "save" which will save and go to another page, and another button labeled "save and add another" which will save the form an ...

javascriptangularjsforms

What is the best way to retrieve a particular element from a dictionary?

In my dictionary structure, I have a list containing 2 dictionaries. Here is an example: dict: { "weather":[ {"id": 701, "main": "Mist", "description": "mist"}, {"id": 300, "main": "Drizzle", "description": "light intensity drizzle"} ] } If I wan ...

javascriptpythonarraysjsonobject

How do I set a new value for a variable from within a function?

After retrieving initial numbers from a JSON file, I want to update them using an ajax call. How do I go about replacing the values of homePoints and awayPoints with the new ones fetched through ajax? I have reviewed the provided answers but none seem to ...

javascriptjqueryjsonajax

Obtaining a pdf file using javascript ajax is a straightforward process

Looking to access my JavaScript file generated by a microservice (byte[]): public int retrieveLabel(Request request, Response response) throws IOException { response.header("Access-Control-Allow-Origin", "*"); ArrayList<JSONObject> orders = ...

javascriptajaxpdf

Entity Framework and the GET request error: Connection Reset

Currently, I am working on developing a straightforward notes application using Entity Framework in ASP.Net Core for the backend and AngularJS for the frontend. The main objective is to have the app load a pre-existing list of notes from my MySQL database ...

javascriptangularjsapientity-frameworkasp.net-web-api

Exploring the seamless integration of AngularJs databinding with JSON for dynamic content

I have a question that seems simple, but I can't seem to find the answer anywhere. My goal is to load JSON data from my server into the client using AngularJS. How can I display all three slides in my view with AngularJS? Currently, with this code, ...

javascriptangularjsjson

Steer clear of redundant information within an array located within a recursive function

Currently, I am facing a challenge with a recursive type of function that dynamically runs based on a returned query. My goal is to prevent duplicate or redundant data in my array during each recursive loop by filtering out any duplicates. Here is the cod ...

javascriptarraysajaxfunctionrecursion

Accessing a file located beyond the confines of the tomcat directory structure

I am facing an issue with accessing a file located outside the Tomcat directory within my ServletContextListener. The file structure is not under my control and I need to find a way to retrieve this file. Below is the code snippet I have been using: // Acc ...

javafile