Combining the chosen value from a combo box to display in a label using ExtJs 3.4

In my form panel, I have an Ext combo box set up like this:

new Ext.form.ComboBox({
    store : routeStore,
    displayField : 'rName',
    valueField : 'rName',
    fieldLabel : 'Select Fixed Route',
    id : 'routeCombo',
    typeAhead : true,
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    selectOnFocus : true,
    editable : true,
    hidden : false,
    disabled : true,
    minChars : 1,
    hideLabel : true,
    width : 210,
    emptyText : 'Select Fixed Route'

})

Additionally, there's a label included in the setup:

{
        xtype : 'label',
        id : 'idTourCode',
        text : 'SystemDate',
        forId : 'myFieldId',
        style : 'marginleft:10px',
        //autoWidth : true,
        flex : 1
    }

My objective is to append the selected value from the combo box to the existing text of the label when a button is clicked. However, I haven't been able to figure out a solution on my own. Any assistance or guidance on how to solve this would be greatly appreciated.

Thank you so much!

javascriptextjscomboboxlabel

Answer №1

This solution may need some refinement.

To enhance your combobox functionality, include the following code:

listeners: {
    change: function(box, newValue)
    {
        Ext.ComponentQuery.query("#myLabel")[0].setText(newValue)
    }

Incorporate this snippet into your label component:

itemId: 'myLabel'

Please consider improving this implementation by finding a more efficient method to access your combobox compared to using Ext.ComponentQuery, as it can be slow.

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

Unable to simulate the navigator.language

I'm currently in the process of writing unit tests for some of my shared utility functions. As someone who is relatively new to unit testing, I am encountering difficulties when trying to mock certain global objects. Specifically, I am struggling to f ...

javascripttypescriptunit-testingjestjsnext.js

The use of jQuery.parseJSON is ineffective for a specific string

Why isn't jQuery.parseJSON working on this specific string? ({"stat":"OK","code":400,"data":[{"title":"Development Convention","event_type":false,"dates_and_times":[{"date":"28\/03\/2012","start_time":"10:00 AM","end_time":"10:00 AM"},{"dat ...

javascriptjqueryjsonparsing

Leverage the power of the React useFetch hook with an onclick/event

My component utilizes a custom reusable hook for making HTTP calls. Here is how I am using it: const { data, error, isLoading, executeFetch } = useHttp<IArticle[]>('news', []); Additionally, within the same component, there is a toggle che ...

javascriptreactjs

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson

What is the best method for transforming a nested object into an array of objects?

This object contains nested data var arr = [{ "children": [{ "children": [{ "children": [], "Id": 1, "Name": "A", "Image": "http://imgUrl" }], "Id": 2 "Name": "B", ...

javascriptarraysjsonobject

Remove httpOnly cookies in Express

Can browser cookies with the attribute HttpOnly:true be deleted? Here is a snippet of my login endpoint: async login(@Ip() ipAddress, @Request() req, @Res() res: Response) { const auth = await this.basicAuthService.login(req.user, ipAddress); ...

javascriptnode.jstypescriptexpresscookies

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

Currently, I am experimenting with A-Frame and my Quest 2 headset in order to create a simple VR game. One particular challenge I am facing is understanding how to separate logic from rendering and establish a proper game loop. After discovering this tutor ...

javascriptthree.jsgame-developmentaframegame-loop

Unable to bypass YouTube advertisement

I am currently experimenting with using nodejs puppeteer to test if I can bypass the ad on Youtube. Although this is just for testing purposes, I am facing some challenges with getting it to work as expected. I have implemented a while loop to search for ...

javascripthtmlnode.jspuppeteer

Encountering a "Token Error: Bad Request" when attempting to call the callback URL

Every time I try to invoke the callback URL with google-OAuth2, I encounter the following error: Error Traceback: TokenError: Bad Request at Strategy.OAuth2Strategy.parseErrorResponse (G:\projects\oauth\node_modules\passport-oauth ...

javascriptexpressoauth-2.0passport.js

Leveraging ng-selected in AngularJS to effortlessly select multiple options from a collection

Two arrays of objects are causing me some confusion, with one array being a subset of the other: $scope.taskGroups = [ {id: 1, name: 'group1', description: 'description1'}, {id: 2, name: 'group2', description: 'descr ...

javascriptangularjs

Creating aliases for a getter/setter function within a JavaScript class

Is there a way to assign multiple names to the same getter/setter function within a JS class without duplicating the code? Currently, I can achieve this by defining separate functions like: class Example { static #privateVar = 0; static get name() ...

javascriptclass

Navigate back to the previous page following the completion of an AJAX data submission

When using ajax to send data from page A to the server, the spring controller returns welcome page B. This process works correctly on Firefox and Internet Explorer, but on Chrome, there is an issue where after successfully sending the data via ajax, the de ...

javascriptjqueryajaxspring

The Render function in ReactJS is not getting refreshed

My goal is to implement a chat feature using material UI. I have set up a function where users can submit new chat messages, which then go through the reducer and are stored in the redux store. The process seems to be working fine, except for the fact that ...

javascriptreactjsreact-reduxmaterial-ui

Does running npm install automatically compile the library code as well?

I have a query regarding npm and its functionality. I also posted the same question on Reddit, but haven't received a satisfying answer yet. Let's use the jQuery npm package as a case study. Upon running the command npm install jquery, I notic ...

javascriptjquerynode.jsnpm

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

My current project is stored locally, with a specific directory structure that I've simplified for clarity. What I'm aiming to do is include an external HTML file as the contents of a <header> element in my index.html file without manually ...

javascriptjqueryhtmlload

Accessing attribute value of selected option in AngularJS select element

I have a select tag that displays options, and I want it so that when an option is selected, the value of the data-something attribute is copied into the input element. This is just for demonstration purposes; the actual value should be sent in the form. ...

javascriptangularjsangularjs-ng-change

Real-time Updating of ChartJS Charts in Rails Using AJAX

I am currently working with Rails 5 and the latest version of ChartJS library (http://www.chartjs.org/docs/). My goal is to retrieve the most recent 20 items from the SensorReading model and update the Chart using setInterval and AJAX. I have successfull ...

javascriptjqueryruby-on-railsrubyajax

Tips for making sure the Button component in material-ui consistently gives the same ID value for onClick events

Issue arises when trying to log the ID of the Button component, as it only logs correctly when clicked on the edges of the button (outside the containing class with the button label). This problem is not present in a regular JavaScript button where text is ...

javascriptreactjsmaterial-ui

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

javascriptjqueryhtmlcss