Struggling to configure an input field using ExtJS

I am trying to use an onChange event to update an input field with the selected option. Below is my code:

HTML:

<select id="builds" onchange="setBuild()">
    <option value="select">Select</option>
    ...
</select>


<input type="text" id="buildInfo" name="buildInfo" style="margin-top:10px;" value=""/>

ExtJS:

function setBuild(){

    var value = Ext.get("builds").dom.options[Ext.get("builds").dom.selectedIndex].text;

    Ext.get("buildInfo").update(value);
}

Even though I am passing a valid value, the input element is not getting updated. Can someone help me identify what I am missing?

javascriptextjs

Answer №1

The conventional practice involves employing the update method to substitute the inner HTML content of an element. Alternatively, you might consider directly assigning a new value to the buildInfo element using Ext.get("buildInfo").value = value .

Interestingly, I have yet to come across extjs being utilized in such a manner :)

Answer №2

When it comes to the input field, make sure to set the value using the following code: Ext.get('binfo').dom.value = value

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

NextJs redirection techniquesWould you like to learn the best ways

Currently, I am developing an application using NextJS with Firebase authentication integration. Upon successful authentication, my goal is to retrieve additional customer details stored in a MongoDB database or create a new document for the customer upon ...

javascriptreactjsnext.js

What is the best way to specify a function parameter as a Function type in TypeScript?

I'm currently delving into the world of TypeScript and I am unsure about how to specify a function parameter as a function type. For instance, in this piece of code, I am passing a setState function through props to a child component. const SelectCity ...

javascriptreactjstypescripttypescript-genericsreact-typescript

Encountering an error when attempting to upload a file to S3 using JS Vue

I'm attempting to upload a file to my S3 bucket using the aws-s3 library, but I am encountering this error in the console: https://i.stack.imgur.com/lk47U.png Here is the code for the component: <template> <input type="file" @ch ...

javascriptamazon-web-servicesvue.jsamazon-s3

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss

Issue with People Picker directive causing AngularJS validation to fail

I have implemented a SharePoint client-side people picker in my form using the directive from this GitHub repository. However, I am facing an issue where the validation of my form fails and the button remains disabled. When I remove the field, the validati ...

javascriptangularjsvalidationsharepoint

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Troubles arise when using $resource without initializing it with the new operator

Trying to utilize the Angular promise API in my application has left me feeling a bit puzzled. I set up a factory as shown in the code snippet below: factory('transport', function ($resource) { var baseUrl = "http://aw353/WebServer/odata/Pay ...

javascriptangularjsngresource

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Including onMouseUp and onMouseDown events within a JavaScript function

I am experiencing an issue with a div that contains an input image with the ID of "Area-Light". I am attempting to pass the ID of the input image to a function. Although event handlers can be directly added inside the input tag, I prefer to do it within ...

javascripthtml

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

My current solution involves the following code: @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { html{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(- ...

javascripthtmlcssfrontendscreen-rotation

Exponential calculator in Javascript

I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet: <html> <head> <meta charset = "utf-8" ...

javascripthtmlcss

In React conditional return, it is anticipated that there will be a property assignment

What is the optimal way to organize a conditional block that relies on the loggedIn status? I am encountering an issue with a Parsing error and unexpected token. Can someone help me identify what mistake I am making and suggest a more efficient approach? ...

javascriptreactjsjsx

Dealing with redirect issues in a React-Material menu: A guide to troubleshooting and

When working with my menu, I face a variety of issues. First and foremost, within the initial RETURN section, there is a TREEITEM with a LISTITEM and a LISTITETEXT. I have included an OnClick event in the LISTITETEXT so that if the menu's id matches ...

javascriptreactjsmaterial-ui

Ways to obtain parameter from URL in Express without diving into the request object

const express = require('express'); const app = express(); app.use('/', anyroute); // in anyroute file router.route('/:id').get(controlFunction) controlFunction(req, res, res)=> { // Here we can get the "id" fr ...

javascriptnode.jsexpress

Using jQuery to retrieve child elements and assign numerical values to them

Looking for a jQuery function that can apply different CSS attributes to children elements of a div. <div class="container"> <div class="autogenerated-div"></div> <div class="autogenerated-div"></div> <div class="aut ...

javascriptjqueryhtmlcsschildren

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

When implementing getStaticProps and getStaticPaths in a dynamic route, a 404 error page is displayed

As someone new to Next.js, I decided to delve into creating a basic news website where I could access articles through this specific route: /[category]/[article] The directory structure of pages is organized as follows: _pages __[category] ____index.jsx ...

javascriptnext.js

What is the best way to alphabetically arrange an array of names in a JavaScript.map?

I am attempting to alphabetically sort an array of first names using JavaScript map function. Additionally, I aim to remove the "undefined" row from the final results: function contacts_callback(obj) { var contactinfo = obj.contacts .filter( ...

javascriptjqueryarrayssorting

An unconventional web address was created when utilizing window.location.hostname

I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results. As I am currently testing on a local server, the desired request URL is http://127.0.0.1:800 ...

javascriptlaravelvue.js

The protected routes within a React JS application consistently result in an undefined value

In my ProtectedRoute component for my react application, I am facing an issue with user authentication. I am using react-router-dom v6 to access the token from localStorage, but no matter what, the user variable always returns undefined. import { Outlet, N ...

javascriptreactjsreact-router-dom