Best practices for assigning values to model field in EXT JS are as follows:

I'm facing an issue with a certain model structure:

Ext.define('my.workspace.Area', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
        {name: 'id', type: 'string'},
        {name: 'width', type: 'int',getterName:'getWidth',setterName:'setWidth'},
        {name: 'height', type: 'int',getterName:'getHeight',setterName:'setHeight'}
    ]
});

When I create an instance of this model like so:

var area = Ext.create('my.workspace.Area');

I encounter a problem where I cannot utilize the setWidth and setHeight setters to assign values. Instead, I have to use it in this manner:

area.set('width', someWidthValue);
area.set('height', someHeightValue);

The issue arises when I try to serialize this object to json through a save() or sync() call on the containing store. The resulting JSON includes an unwanted "data" entity as shown below:

...
"area": {
      "data": {
        "id": "someId",
        "width": 260,
        "height": 502
      },
...

What I actually need is a clean structure without the extra "data" nesting. Could this be happening due to how I'm setting field values? If not, what is the correct approach to handle this situation?

Your insights and guidance are greatly appreciated.

Answer №1

While I'm not an expert in this field, I believe the following link may be of assistance:


From my understanding, the [data] plays a role within the structure of [Ext.data.Model] that you are extending.
The fields can be accessed through the [data].

area.set('width', someWidthValue);
area.get('width');

If you wish to utilize setters like setWidth, they can be defined as outlined in the provided link above.

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

What is the best way to execute NPM commands within the terminal of Visual Studio Code?

I recently installed npm in VSCode from extensions, but I am having trouble activating it. When I try to run the command 'npm init' in the terminal, I receive the following error message: "The term 'npm' is not recognized as the name of ...

Not sure about the Fat Arrow (=>) function

Hey there, I've been diving into NextJs and came across this issue: This Module is Functional const GlobalStyles = () => ( <> <Global styles={css` body { color: #000000; } `} ...

What is the most effective method for accessing, editing, and outputting large JSON files in Node JS?

Task at hand: I need to handle large amounts of data (1 GB & more) in JSON format, perform formatting, parse the data, restructure the JSON, and return the newly formatted JSON as a response. What is the best approach for this situation? I read on a blog ...

When the child state changes the parent state, useEffect may not be triggered for the first time

Component for children export const FlightRange = (props) => { const [value, setValue] = useState(props.value); return ( <> <input type='range' min={1000} max={50000} step="500&quo ...

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

The data array is currently structured in this way. I have attempted various methods but have not been able to find a suitable solution. I need to send the JSON below via an AJAX request, however, I do not want the keys 0 and 1 in both child arrays. [sch ...

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

I have put together these JavaScript functions to hide the delivery address fields on my shopping cart address form if the goods are being sent to the billing address. The functions control the visibility of the HTML wrapped by... function getItem(id) { ...

How can I utilize JavaScript on the server-side similar to embedding it within HTML like PHP?

One aspect of PHP that I find both intriguing and frustrating is its ability to be embedded within HTML code. It offers the advantage of being able to visualize the flow of my code, but it can also result in messy and convoluted code that is challenging to ...

Refreshing a node in Jqgrid Treegrid by updating the local source data

I have constructed a Treegrid using local data $("#historyGrid").jqGrid({ datatype: "jsonstring", datastr : treeGridObject , colNames:["Id","Channel","Current","History","Delta"], colModel:[ {name:'id', index:'Id&apo ...

Tokenizer method utilizing strings

Imagine a scenario where strings adhere to this specific format: id-string1-string2-string3.extension In this case, id, string1, string2, and string3 can all vary in length, with extension being a standard image extension type. To illustrate, here are a ...

Developing a fresh browser window with a clickable button using JavaScript

Currently, I am learning JavaScript and trying to create a button on a webpage using the code I wrote in JavaScript. However, instead of adding the button to the page specified by me, it is always added to index.html. I am using WebStorm IDE for this proje ...

Dropdown for state selection within WooCommerce for specific countries

I am encountering a challenge in configuring a form with default WooCommerce country and states selection dropdowns. Essentially, my goal is to present the Country selection first, followed by the State selection based on the chosen country. For instance, ...

A guide on retrieving a large amount of JSON data in a RESTful web service with Java, Tomcat, and Eclipse

Within this context, there are several paragraphs discussing the utilization of Java, RESTful services, Tomcat, and Eclipse... If you're interested, you can access the JSON data by clicking [here] The individual is demonstrating how to retrieve JSO ...

Display resize grip when hovering

Is there a way to make elements resizable using resize: both, but only show the corner handle when hovering over the element? I am looking for a solution to display that specific handle only on hover. ...

Angular.js has been activated with the chosen:open event

I've been implementing the chosen directive for AngularJS from this source and so far it's performing admirably. However, my goal is to trigger the chosen:open event in order to programmatically open the dropdown menu as outlined in the chosen do ...

I am planning to divide my web application into two sections by utilizing react router. I intend to incorporate a router within one of the routes mentioned earlier

/src |-- /components | |-- /signin | |-- SignIn.js | |-- /home | |-- Home.js | | |-- /dashboard | |-- Dashboard.js | |-- /assignee |-- /App.js |-- /index.js Dividing the project into two main parts: signi ...

Struggling to access the height attribute from a CSS file

Hey there. I'm pretty confident that the solution to my query is quite simple. So, I have a .css file with this particular code snippet: div.site { text-align:center; border:2px solid #4b6c9e; padding:1px; margin-top:10px; font-size:medi ...

Traverse through the keys and values of a JSON object using JavaScript

I have a json string that needs to be parsed in a specific way. The structure of the json is as follows: { "a": [{ "b": [ ["c"], [] ], "d": [ [], [] ], "e": [ [], ["f"] ], "g": [ [], ...

What is the purpose of using double quotes within single quotes in JavaScript?

Could someone clarify the reason behind needing to nest double quotes inside single quotes in my Webpack configuration shown below? What is preventing using just double quotes? module.exports = merge(prodEnv, { NODE_ENV: '"development"', API ...

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval

In my Django project, I need to load body.html first and then dashboard.html. The dashboard.html file is heavy as it works with python dataframes within the script tag. So, my goal is to display body.html first, and once it's rendered, show a loading ...

An easy and Pythonic method to beautifully format response headers from requests

I am struggling to format the HTTP response from Python's Requests library in a clean and Pythonic way without relying on external packages. I keep running into issues with the JSON formatting. What I have attempted: I tried converting response.head ...