Ext.js Ext.grid.Panel with advanced filtering capabilities

I encountered an issue with the following code snippet...

Ext.define("Requestor.view.main.RequestGrid", {
  extend: 'Ext.grid.Panel',     // Our base class. A grid panel.
... extensive code ...

  columns: [
... additional code ...

    {
      text: 'Status',
      dataIndex: 'status',
      renderer: function(value, metaData) {
        metaData.tdStyle = (value == 'Ready') ?
          'color:green;font-weight: bold' :
          'color:red;font-style: italic'
        return(value)
      },
      filter: { type: 'list', value: 'Ready' },
      flex: 1
     } 
... more code ...

The functionality works fine upon initial page load, and when I manually adjust the filters to display additional rows with statuses other than 'Ready'. (view screenshot)

https://i.sstatic.net/lANIZ.png

However, when attempting to change the sorting on the Status column, the filter automatically reverts to only showing rows with a status value of 'Ready'. (view screenshot)

https://i.sstatic.net/CpL89.png

I'm unsure if this issue is a bug in the code or if I am making an error somewhere. Any insights would be greatly appreciated.

Thank you!

javascriptextjs

Answer №1

When setting up filters of list type, I typically use the following structure:

                {
                    type: 'list',
                    dataIndex: 'indexName',
                    labelField: 'name',
                    store: Ext.create('MyStore')
                }

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

How can the Angular Js framework be utilized to create a pop-up feature in combination with Bootstrap?

I'm currently working on a website using AngularJS and Bootstrap. When the site is loading, I make a server call to fetch some data. This process takes some time, and during this interval, I want to display a pop-up message indicating that the user s ...

javascriptjqueryangularjs

AngularJS - Issue with retrieving the most recent entry during $routeChangeStart event

I am utilizing the $routeChangeStart function to redirect authorized users to specific URLs and prevent unauthorized access to special pages. In addition, I have dynamically generated pages that can be accessed via their unique page slugs. To achieve this ...

javascriptangularjs

Updating a component in Angular 4.3.1 from within an observable callback

My Project Journey I am currently immersing myself in learning Angular by working on a personal project: developing a game that involves routing, services, and more. One of the requirements is to hide the header on the landing page (route for '/&apos ...

javascriptangulartypescript

Setting the base URL in Next.js according to an environment variable: a step-by-step guide

I currently have a Strapi backend and Next.js frontend application deployed on DigitalOcean. Within DigitalOcean, I have configured an environment variable for the frontend: API_URL = ${APP_URL}/api To generate the base URL, I retrieve this variable using ...

javascriptnode.jsenvironment-variablesnext.jsdigital-ocean

What are the best ways to utilize getElementById in React?

As a beginner in React, I am attempting to create an auto text animation for my project. While I have successfully implemented it in VanillaJS, I am facing challenges with doing the same in React. import React, { Component } from 'react' class A ...

javascriptreactjs

Obtaining the distinct identifier of a MongoDB document during insertion

I am currently developing a NodeJS express application with MongoDB (using Mongojs) and I am facing some challenges in achieving a specific task. My issue is related to inserting an object into a collection and then obtaining the unique identifier of this ...

javascriptnode.jsmongodbexpressmongojs

Canvas image zoom and crop feature ensures fixed selection area across all platforms

After finding inspiration from a source I cannot name, I developed a plugin that allows for image cropping on both mobile and desktop devices. The key features of my plugin include touch support, dynamic canvas sizing based on image dimensions, and the ab ...

javascript

Disregard any unrecognized variables associated with the third-party package

I've been working on integrating the bluesnap payment gateway into a react/ts project. I added their hosted javascript code to my public/index.html and started the integration within a component. However, when compiling, an error pops up saying ' ...

javascriptreactjstypescript

Retrieving values from a multidimensional array in JavaScript

I need some help with my code. I am struggling to pass an array (larray3) containing elements from two other arrays (larray1 and larray2) from data.js to model.js and view.js. Despite correctly building the multidimensional array in data.js, when I receive ...

javascriptsqlarraysnode.jselectron

NodeJS/ExpressJS API exposure

Currently, I am developing a website using Express and implementing route handling with the help of express router. The routes I have set up so far include registration, login, upload, and more. One particular route, upload, requires files to be uploaded ...

javascriptajaxnode.jssecurityexpress

What is the best way to keep track of choices made in 'mat-list-option' while using 'cdk-virtual-scroll-viewport'?

I have been working on implementing mat-list-option within cdk-virtual-scroll-viewport in an Angular 14 project. I came across a demo project in Angular 11 that helped me set up this implementation. In the Angular 11 demo, scrolling functions perfectly an ...

javascriptangulartypescriptangular-material

Is it possible to use Node.js child processes without carriage returns?

My Node.js script is set up to handle some database operations by creating child processes using the spawn functionality. However, I encountered a strange issue where the output stopped displaying carriage returns. Here's an example of what was happen ...

javascriptnode.jsbashmacos

Navigating with Nokia Here maps: plotting a path using GPS coordinates

I am currently developing a GPS tracking system and my goal is to visually represent the device's locations as a route. The challenge I'm facing is that there is a REST API available for this purpose, but my client-side application relies on soc ...

javascriptnode.jsgps

What are some reasons why the XMLHttpRequest ProgressEvent.lengthComputable property could return a value of

I've been struggling to implement an upload progress bar using the XMLHttpRequest level 2 support for progress events in HTML5. Most examples I come across show adding an event listener to the progress event like this: req.addEventListener("progress ...

javascriptajaxxmlhttprequest

Secure HyperText Transfer Protocol prevents JavaScript from executing

My website's HTTPS version is having trouble loading JavaScript. All scripts are hosted on the same server. I've attempted: <script type="text/javascript" src="https://server.tld/js/jquery.js"> <script type="text/javascript" src="//ser ...

javascripthttpsapache2webserverblock

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

Refreshing the page to display new data after clicking the update button

function update(){ var name= document.getElementById("TextBox").value; $.ajax({ url: '....', type: 'post', ...

javascriptphpajaxreload

Utilizing a dynamic ref in Vue using the composition API

While working with the composition API in Vue 3, I am trying to create a reference to a component dynamically. Typically, this would involve adding ref="name" to the template and then defining a ref using const name = ref(null). However, I am loo ...

javascriptvue.jsfrontendvuejs3

Implementing pagination with complete page information using node.js and mongodb

Hello, I am currently working on implementing pagination in NodeJS and MongoDB. Check out the code I have written below: router.get("/PO_pagination", verify, async (req, res) => { console.log("req.query", req.query) try { let ...

javascriptnode.jsmongodbmongoosepagination

jqGrid: What could be causing the events I defined for grid edit to not fire?

I've been attempting to make in-line edits on a grid, but it seems like none of the events connected to those edits are being triggered. I am specifically looking to use afterSubmit: so that it triggers after the user has edited the Quantity field in ...

javascriptjqueryasp.net-mvcjqgrid