Linking an intricate property in ExtJS to a text field

Here is an example of JSON data:

{ name: { firstname: 'First Name', lastname: 'Last Name' } }

How do I go about loading this data into a form field in ExtJS?

First Name: [ First Name ]

Last Name: [ Last Name ]

UPDATE:
After implementing the above technique, I encountered another challenge when trying to send my changes back to the server. ExtJS generated the JSON in a different format than expected.

{ "firstname": "New first name", "lastname": "New last name"}  
// instead of 
{ "name": { "firstname": "...", "lastname": "..."} }

Is this the intended behavior or is there a way to instruct ExtJS to serialize the object back to its nested form? Thank you.

P.S: Code snippets taken from the Ext MVC application guide available at http://localhost/extjs/docs/index.html#!/guide/application_architecture

Answer №1

My recommendation is to split this into two distinct fields within your model setup:

Define("User", {
    extend: "Ext.data.Model",
    fields: [
        {name: "first_name", mapping: "user.first_name"},
        {name: "last_name", mapping: "user.last_name"}
    ]
});

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

Using API calls to update component state in React-Redux

I am currently working on setting up a React application where clicking on a map marker in one component triggers the re-rendering of another component on the page. This new component should display data retrieved from a database and update the URL accordi ...

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

I have a button with both the label and onClick properties. Additionally, I have an array containing the values I need to assign to the label property. Here is the code snippet: render(){ {tabel_soal.forEach(function (item, index) { <Ra ...

What is the syntax for creating a zip function in TypeScript?

If I am looking to create a zip function: function zip(arrays){ // assume more than 1 array is given and all arrays // share the same length const len = arrays[0].length; const toReturn = new Array(len); for (let i = 0; i < len; i+ ...

Show the tabulated outcomes of entries in a MySQL database and present them using ChartJs

My goal is to show the total number of rows stored in a MySQL Database and present these numbers using ChartJs. However, I am encountering issues with displaying the values correctly when retrieving data from my PHP Script. PHP Code Snippet for Counting R ...

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...

Is there a way to streamline this function call that appears to be redundantly repeating the same actions?

I have developed a function to search for blog posts, prioritizing titles over excerpts and excerpts over content when added to the containsQuery array. While the code seems to be working well, I have noticed that there is a lot of redundant code. How can ...

Using JavaScript to pre-select a radio button without any user interaction

Is there a way to programmatically set a radio button in a group without physically clicking on the button? I am attempting to open a jQuery page and depending on a stored value, the corresponding radio button should be selected. I have researched similar ...

What alternatives are there to angular scope functions?

I find angular scope functions challenging to work with due to their lack of a clear contract. They extract parameters from the scope and store results back into the scope, rather than explicitly defining function parameters and returning a result. Conside ...

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

In my attempts to retrieve specific statistics from the PokeAPI using Axios and Node.js, I encountered an error

Having an issue while trying to utilize the Pokemon API. Whenever attempting to access the attack, HP and speed stats, all Pokemons show up as undefined! Can someone please point out what might be wrong with my API call? const axios = require('axios&a ...

JavaScript alert: element does not exist

Check out my code snippet below. The inline JavaScript alert works fine, but the external one isn't firing. Every time I reload the page, I'm greeted with a console error message saying "TypeError: tileBlock is null". Any suggestions on how to re ...

An error has occurred: Unable to access the property "filter" as it is undefined

After deploying my react-app online using npm run build, I encountered an issue where a page on my app displayed an error in Container.js. Despite being unfamiliar with this file and its purpose, I attempted to resolve the issue by reinstalling all node_mo ...

Is a non-traditional fading effect possible with scrolling?

I have implemented a code snippet to adjust the opacity of an element based on scrolling: $(window).scroll(function () { this = myfadingdiv var height = $(this).height(); var offset = $(this).offset().top; var opacity = (height - homeTop + ...

Is it possible to reduce a field value in firestore after successfully submitting a form?

I have a variety of items retrieved from firestore: availability : true stocks: 100 item: item1 https://i.stack.imgur.com/hrfDu.png I am interested in reducing the stocks after submitting a form. I used the where() method to check if the selected item m ...

Mongoose consistently fails to properly save dates

I have created a Mongoose model and included a birthdate field in the following way: birthdate: { type: Date, required: [true, "Please enter a birthdate"], lowercase: true, validate: [isDate, "Please enter a valid birthdate&q ...

Show a pair of pictures every X hours using Javascript

Trying to create a code that displays different pairs of images each day, but struggling to make it select them randomly. Instead, the code currently just goes through the array one by one. I'm not great with Javascript and haven't found a way to ...

Stellar.js is malfunctioning

I've been attempting to implement a parallax effect using Stellar.js with two image tag elements, but I'm encountering issues. Despite trying various configurations, including following the Stellar.js creator's tutorial scripts closely, noth ...

Having trouble with Javascript Array Push and Splice not functioning properly?

My goal is to replace the value "3" with "4" in the array. After this operation, only "1":"2" will remain in the array. const array = []; array.push({ "1": "2" }) array.push({ "3": "4" }) const index = array.indexOf(3); if (index > -1) { array.sp ...

Master the art of string slicing in JavaScript with these simple steps

I am attempting to utilize the slice function to remove the first three characters of a string within a JSON object. $(document).ready(function() { $.ajaxSetup({ cache: false }); setInterval(function() { $.getJSON("IOCounter.html", functio ...

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...