Null values in ExtJS JSON records are handled seamlessly

How can I make a grid recognize when a JSON property changes from null to a value and mark it as isDirty?

{
  "prop1": null,
  "prop2": "",
  "prop3": "my val"
}

When a user edits the prop1 cell in an Ext.grid.EditorGridPanel for the first time, it is not marked as dirty. However, on the second edit, it is correctly marked as dirty. The issue seems to be with handling null values when using record.set().

set : function(name, value){
var encode = Ext.isPrimitive(value) ? String : Ext.encode;
    if(encode(this.data[name]) == encode(value)) {
        return; //always returns here if value is null
    } 

Update:

The workaround is to set the raw value for the data property of a record:

data = segments[i]; //my JSON 
recMetadata = Ext.data.Record.create(store.fields.items);
r = new recMetadata({}, data.MyID); //blank record with ID
for (j in data) {
    //r.set(j, data[j]); //does not set the data property if null
    r.data[j] = data[j]; //set raw value and all is fine with isDirty etc. 
}
store.insert(0, r); 

Answer №1

To guarantee that the record is marked as modified after each edit, you can manually set it as dirty...

Include this in your EditorGridPanel configuration:

listeners: {
   'afteredit': function(event) {
       if(event.value !== event.originalValue) {
          event.record.markDirty();
       }
   }
}

Answer №2

The ExtJS isDirty method has a well-documented issue that I believe will be fixed in the upcoming major update.

Have you considered altering how you load the JSON data? Perhaps returning an empty string instead could resolve the problem.

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

Extracting data from nested objects array in React: A step-by-step guide

I am facing an interesting challenge. Currently, I am immersing myself in learning react and have managed to retrieve data from a demo API that I created using Java Spring. Although I am successfully receiving the data in React, my struggle lies in creati ...

Using React js to transform objects into arrays for useState

Hey there! I'm currently working on a webshop demo project for my portfolio. I've encountered an issue while trying to fetch data from commerce.js. The data is in the form of objects, which are causing problems when I try to map them. I've a ...

The column width in Bootstrap HTML is too excessive

var parentDiv = document.getElementById("cc"); var statementDiv = document.createElement("div"); var statementName = document.createElement("div"); // var removeIconDiv = document.createElement("div"); // removeIconDiv.className = "col w-25"; // ...

What could be causing the unexpected behavior of req.query in NEXT.js?

In the latest version of NextJS App Router, I have the following code located in the file app\api\products\route.tsx import { initMongoose } from "@/lib/mongoose"; import Product from "@/models/products"; import { NextApi ...

Adding a file filter in Kendo v2016 is a simple process that can greatly enhance

I'm exploring how to implement a file filter in Kendo.Mvc.UI.FileUpload. I've come across some examples online that utilize a method called 'select', but it seems that the current version of Kendo I'm using doesn't have this m ...

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

"Expo Securestore is encountering an issue where it is unable to store the user ID and token following authentication

I am currently working on securely storing the userId and token in SecureStore. I have successfully retrieved the token from SecureStore on the next screen, but for some reason, I am unable to see the userId. const doUserLogIn = async() => { try { ...

Display the value of a JavaScript variable in a Codeception Acceptance test

Is there a way to view the value of a vanilla JavaScript variable while running an acceptance test? In PHP, you can see the value of a variable in debug using $I->seeMyVar($var), but how can you pass the value of a JavaScript variable to a PHP variable ...

What is the process for obtaining intersection set data from an array?

I'm trying to find the intersection set within an array only containing type 1 and 2. Can you help me with that? var arr = [ { id: 1, auths: [ { authId: 1, type: 1, value: 'Test1' }, { authId: 2, type: 1, ...

Tips for organizing the items in an array in a specific order

Seeking advice on sorting array objects in JavaScript based on input sequence. Given an array input [abc, xyz, 123], the output array object looks like: [ { "label" : "positive", "id" : "abc" }, { "label" : "positive", "id" : "xyz" }, { "label" : "negativ ...

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

I am facing a similar issue to Convert an HTML form field to a JSON object with inner objects, but in the opposite direction. Here is the JSON Object response received from the server: { company : "ACME, INC.", contact : { firstname : "Da ...

What is the best way to automatically hide the Materialize CSS mobile navbar?

Recently, I completed a website called Link. Using only Materialize CSS, Vanilla JS, and plain CSS, I developed a single-page application that effectively hides and reveals different sections based on event listeners. Everything functions smoothly except ...

Getting the error message "t is not a function. (In 't(i,c)', 't' is an instance of Object)" while attempting to switch from using createStore to configureStore with React Redux Toolkit

I am attempting to switch from react-redux to its alternative react-redux toolkit but I kept encountering this issue t is not a function. (In 't(i,c)', 't' is an instance of Object) and I am unsure of its meaning. Here is the c ...

Looking to dynamically update a date variable based on user selection from a drop-down menu in PHP

I am currently working with a PHP file (index.php) which features a title bar displaying the date in the format (MM YYYY). The dates themselves are extracted from another PHP file named latest_update.php. Within the latest_update file, the dates are specif ...

Using an external call to trigger the revert method in jQuery UI

My draggable event setup looks like this: $(ids.label).draggable({ containment: ids.wrapper, revertDuration: 100, revert: function(event) { $(this).data("draggable").originalPosition = { top: $(this).data('origionalTo ...

What is the best way to extract JSON data from a string within a loop

Does anyone know why the parsed data is not printing out inside the loop when trying to parse a JSON string? Any help would be appreciated. Thanks! $code2 sample data: { p '5123': { p 'tmp': p '1', p 'name&a ...

What is the best way to extract the singular PDF link from a webpage?

Currently, I am attempting to utilize Selenium in Java to access DOM elements. However, I have encountered an issue while testing the code: Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: stale element reference: element is n ...

Guide on loading '.obj' files with multiple '.mtl' files using Three.js

I am attempting to load the cube.obj file which references multiple cube_*.mtl files, each of which utilize texture images in the format *.png. The resources can be found here. My goal is to dynamically load objects with the same geometry but different mat ...

Difficulties arise when attempting to display an input within a Bootstrap modal

Upon clicking an icon, I aim to display a bootstrap modal prompting the user to input text and a date. I have adapted code from W3Schools to create the necessary form. Unfortunately, when the button is clicked, only the labels and text area are shown, not ...

Splunk bubble diagram - a unique way to visualize data

I'm attempting to generate a bubble chart in Splunk using the code below: <dashboard> <label>Bubble Chart</label> <row> <panel> <chart> <searchString>index = _inter ...