String passed instead of JSON in Ext JS grid sorting

I encountered an issue while attempting to incorporate server-side sorting with Sencha Ext JS. The JSON paging section appears correct, but the sort property is defined as a String rather than an Array:

Actual:

{"page":1,"start":0,"limit":50,"sort":"[{\"property\":\"firstName\",\"direction\":\"ASC\"}]"}

Expected:

{"page":1,"start":0,"limit":50,"sort":[{"property":"firstName","direction":"ASC"}]}

In the ExtJs Code below, there are various configurations and settings for data modeling, store creation, grid creation, and event handling.

javascriptjsonextjs

Answer №1

I implemented an event listener called beforeload on the data store.

Here's a functional illustration:

listeners: {
    beforeload: function(store, operation, eOpts){
        var sort = [];
        var filter = [];
        if(operation._sorters){
            for(var i = 0; i< operation._sorters.length; i++){
                var direction = operation._sorters[i]._direction;
                var property = operation._sorters[i]._property;
                sort.push({ 
                    "direction" : direction,
                    "property"  : property
                });
            }
            operation._proxy.extraParams = {sort:sort};
        }

        if(operation._filters){
            for(var i = 0; i< operation._filters.length; i++){
                var operator = operation._filters[i]._operator;
                var property = operation._filters[i]._property;
                var value = operation._filters[i]._value;
                filter.push({ 
                    "operator" : operator,
                    "property"  : property,
                    "value"  : value
                });
            }
            operation._proxy.extraParams = {filter:filter};
        }
    }
}

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

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

Currently, I am in the process of conducting a unit test by referring to the official guide provided. To do so, I have cloned the demonstration repository named vue-test-utils-getting-started. To replicate the issue, follow these steps: After cloning vu ...

javascriptunit-testingvue.jsjestjspreset

What is the best way to highlight a specific city on a map by placing a circle around it?

I am currently developing a project that involves creating a circle around the location of an item on a Google Map. In the code snippet below, when the show tab is clicked, it should display a circle around the item's location on the map: <div cla ...

javascriptphpgoogle-mapslatitude-longitudestreet-address

Hide specific content while displaying a certain element

Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...

javascripthtmljquerycss

iPhone: Fixed position div disappearing

Currently, I am working on creating a mobile menu for my Joomla 3 site located at . The menu is functioning correctly on desktops, however, when attempting to view it on my iPhone, the menu slides in but remains invisible. Despite this, I can still tap on ...

javascripthtmlioscssmobile-safari

Attempting to execute a function within a MAP operation

My attempt to integrate a function into my map is resulting in only the function running and not the rest of the code. Edit: After reflecting on the situation, it dawned on me that I need to elaborate further. The goal here is to execute this.math in orde ...

javascriptarraysreactjs

What causes insertMany in mongoose to not generate ObjectIds?

Currently, I am in the process of developing an application using Node.JS and MongoDB. My challenge lies in inserting multiple documents with predefined _ids and some ObjectId arrays. When I utilize insertMany function, all document _id fields turn into st ...

javascriptnode.jsmongodbmongoosemern

Is there a way to dynamically load a file on scroll using JavaScript specifically on the element <ngx-monaco-diff-editor>?

I've been attempting this task for over a week now in Angular without success. Would someone be able to provide guidance? The onContainerScroll() function isn't being triggered, and I'm considering using JavaScript instead. How can I achiev ...

javascriptangularajaxngx-monaco-editor

Restricting the amount of requests per user within a single hour [Node.js]

As I work on developing a server side application using Nodejs and Express, one thing that crosses my mind is limiting the number of requests per user within a specific time frame to prevent malicious hackers from overwhelming the server with spam. I&apos ...

javascriptnode.jsexpressmiddlewarerestful-authentication

The map function is selectively applied to certain expressions, not all

Currently, I am attempting to display the genre Name and its corresponding gradient by utilizing the map function over an array called genres. While the map function successfully renders the genre Name, it seems to return the same component for the genre g ...

javascriptreactjs

Using a global variable to change the class of the <body> element in AngularJS

I've recently developed an angularJS application. Below is the index.html <html ng-app="MyApp"> <head> <!-- Import CSS files --> </head> <body class="{{bodylayout}}"> <div ng-view></div> < ...

javascriptjqueryhtmlangularjsglobal-variables

How can we stop the anchor jump caused by a third-party script?

I'm currently utilizing a third-party script (details provided below) to divide a form into multiple ajax'd pages. However, when I attempt to move on to the next page, it immediately jumps to an anchor at the top of the form. This behavior is unn ...

javascriptjqueryhtmldrupalanchor

Why is the "class" attribute of an SVG node not being applied when I change it?

I am having trouble changing the "class" attribute of a node in SVG using my AngularJS Directive. Even though I've written the code to do so, it doesn't seem to be applied properly. This is the code snippet from my Directive: node = node.data(f ...

javascriptangularjssvgd3.js

Kurento's WebRTC feature is currently experiencing difficulties with recording functionality

Currently, I am attempting to capture video using the Kurento Media Server with nodejs. Following the hello-world example provided here, I connected a recorderEndpoint to the webrtcEndpoint and successfully got everything up and running. However, on the se ...

javascriptnode.jswebrtckurento

Is it possible to retrieve the width value when using layout=fill in next/image?

<Image alt="image_example" src="/image_example.png" layout="fill" objectFit="none" /> <Test width={?} height={?}/> I developed a straightforward component using next/image. I am interest ...

javascriptreactjsnext.jsnextjs-image

Navigating array usage in Selenium IDE

I am trying to extract emails from a webpage using Selenium for future testing. I need to compare these emails with ones displayed in a selection later on. I attempted to read the emails within a while-loop but struggled with handling arrays in IDE. Unfor ...

javascriptarraysseleniumselenium-ide

Trigger the jQuery function once the external URL loaded via AJAX is fully loaded

Currently, I am in the process of developing a hybrid mobile app for Android and I am relatively new to this technology. I have two functions in jQuery, A and B. Function A is responsible for making an AJAX request to retrieve data from 4 external PHP fi ...

javascriptphpandroidjqueryajax

WCF service method does not support ajax calls

When I make a simple ajax call with a WCF method, it returns bad-request, but without the method, it shows the status as success. Ajax Call $(document).ready(function(){ $.get("http://localhost:1347/Service1.svc/DoWork", //this shows bad-requ ...

c#jsonajaxwcfbad-request

OroCrm is ensuring that Symfony2 profiler seamlessly updates the footer data without triggering a 404 error page within a popup

As a newcomer to OroCrm, I recently installed and configured it on my DEV environment using the app_dev.php entry point. After setting up OroCrm, I immediately noticed the Symfony2 profiler bar appearing at the bottom of the interface. While this was a he ...

javascriptsymfonyorocrm

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

Traversing JSON data recursively to build a tree structure

Attempting to loop through a JSON object and create a hierarchical tree view structure, I'm facing an issue where the nodes FFF and GGG are not being displayed. Any suggestions on how to resolve this? var html = { ul: '<ul></ul ...

jqueryjson