The ExtJS Grid Filter is being triggered excessively

I am working on an ExtJS 6.2 grid that uses the 'classic' API. Although I am not very experienced with Ext, we have a grid component that we reuse with small modifications in different applications. In one of our apps, we have a text field for filtering. However, the default behavior triggers a reload too quickly for users to input meaningful data. I would like to slow down this reloading process. Ideally, I want the reload to only occur when the filter menu is closed. If that's not possible, increasing the time between user input and reload would be helpful.

The problem is that I'm not sure how to achieve this, and I couldn't find a solution in the documentation. Any suggestions?

Here is how the filter is defined:

{ type: 'string', dataIndex: 'assetId', value: '', active: false }

javascriptextjs

Answer №1

To ensure smoother handling of the change event, it is recommended to include a buffer. This means that as long as someone is typing, no event will be triggered. Only after 500ms of inactivity on the textfield, the event will be processed.

controller: 'main',

items: [{
    xtype: 'textfield',
    fieldLabel: 'Filter By Name',
    listeners: {
        change: 'onFilterfieldChange',
        buffer: 500
    }
}]

Controller

Ext.define('MyApp.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onFilterfieldChange: function(textfield, newValue) {
        let store = this.getViewModel().getStore('gridStore');
        
        store.clearFilter(true);
        store.setFilter([
            { property: 'firstName', value: newValue}
        ]);
        store.load();
    }
});

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 steps are required when utilizing ngModelOptions allowInvalid = true in AngularJS?

As a newcomer to AngularJS, I am currently navigating a complex form and it seems like incorporating the ngModelOptions { allowInvalid: true } option could prove beneficial. I can only assume that AngularJS's default behavior of discarding the model ...

javascriptangularjs

Passing parameters in a callback function using $.getJSON in Javascript

I am currently using a $.getJSON call that is working perfectly fine, as demonstrated below. var jsonUrl = "http://www.somesite.co.uk/jsonusv.php?callback=?"; $.getJSON(jsonUrl,function(zippy){ ...some code } However, I want to pass a ...

javascriptjsongetjson

Issues arising with VueJS array props when integrating Bootstrap

I am attempting to display two divs next to each other while iterating through props (which are essentially an array) in VueJS. When I have just a single element, everything functions properly. However, as soon as I include the v-for directive, the element ...

javascripttwitter-bootstrapvue.js

Is there a way to "stream" a specific part of my website to a separate window?

Is there a way to stream a specific container from my webpage to another window? The scenario is similar to a Point of Sale system, where there is an operator-facing display and a second customer-facing display. The operator-facing display will show all ...

javascriptwebsocketstreaming

"Unpredictable behavior observed with useSWR hook or potential issues with outdated closure function

Within my React functional component, I have implemented a Lesson Video Player that functions similarly to Instagram Stories. Each lesson contains videos ("clips") with interactive elements that trigger a multiple-choice quiz for the user. Below is a simpl ...

javascriptreactjsclosuresswr

Cross-Origin Resource Sharing (CORS) for enabling the remote inclusion of JavaScript

I have a unique javascript widget that is designed to be embedded from an external server (e.g. ) The javascript, which contains a simple alert('hello'), is generated by a php script. Upon execution, I include a header like this: <?php heade ...

javascriptphpcors

Tips for defining header and parameters when using route.get in Node.js

Looking to add custom headers and parameters when using route.get in Node.js? I am trying to set a specific value for the header and pass parameter values in the API URL. router.get("/getdata", async (req, res) => { // Set custom header re ...

javascriptnode.jsexpress

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

javascriptphphtmlcss

Correctly define the vm function within the Controller As scope

I am a newcomer to javascript and AngularJS. So... Maybe it's a simple question, but I've noticed two ways to define functions in javascript. In the following controllers, pay attention to "grupoCancha" and "grupoVisible" (I included the entire ...

javascriptangularjs

Concealing specific HTML elements with ng-view in AngularJS

I recently started a project in AngularJS and I'm utilizing ng-view with $routeProvider for templating. However, I've encountered a minor issue where I don't want the navbar to display on specific pages like the landing, login, and registrat ...

javascripthtmlcssangularjs

Avoiding type errors in d3 v5 axis by using Typescript

I am new to TypeScript and I have some code that is functioning perfectly. I believe if I define a type somewhere, d3's generics will come into play? Within my code, I have an xAxis and a yAxis. Both are the same, but D3 seems to have an issue with t ...

javascripttypescriptd3.js

Update the URL using JQuery and Ajax without having to reload the page, ensuring compatibility with Internet Explorer versions 8 and 9

Upon the initial loading of my webpage, it directs to the following URL: /default/ After clicking the "nextPost" button on the screen (which includes an attribute named data-nextPostNumber), the corresponding code is as follows: event.preventDefault(); ...

javascriptjqueryajaxurlget

Using Nestjs to inject providers into new instances of objects created using the "new" keyword

Is it possible to inject a provider into objects created by using the new keyword? For instance: @Injectable() export class SomeService { } export class SomeObject { @Inject() service: SomeService; } let obj = new SomeObject(); When I try this in my t ...

javascriptnode.jstypescriptdependency-injectionnestjs

Error: The variable 'err' is not declared in this scope.at line app.post

Tools I am Using Windows 10 Firebase (Firestore) Postman JavaScript, Express I'm learning from this video(https://www.youtube.com/watch?v=-vo7cu0xP4I) Situation Description I attempted to make a post request using Postman for testing purposes, b ...

javascriptexpressgoogle-cloud-firestoregoogle-cloud-functionspostman

Using Jquery for a synchronous "Ajax" request doesn't seem to be functioning

As a newcomer to javascript, I am currently in the process of developing a react/flux app and utilizing jquery for synchronous "ajax" calls (sjax?) to the backend. However, I am encountering inconsistent behavior which seems to be caused by my ajax call no ...

javascriptjqueryajaxflux

Find the total of values in an array that may be null or undefined

In this scenario, I have an array that looks like this: myData = [[2, null, null, 12, 2], [0, 0, 10, 1, null], undefined]; The goal is to calculate the sum of each sub-array, resulting in an array like this: result = [16, 11, 0]. The ...

javascriptarraysangularjsreduce

Is ExtJS7 capable of supporting open tooling such as Ext-gen and webpack for multi-application projects within a workspace?

Is it possible to develop a multi-application workspace project using ExtJS 7 and integrate open tooling like npm and webpack into it? I have searched for documentation on this but couldn't find any. ...

npmwebpackextjssencha-cmdextjs7

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

javascripthtmlcss

Learn how to dynamically apply a CSS attribute for a set period of time using jQuery and automatically revert it back to its original state after 2 seconds

Is there a way to apply a CSS attribute to a specific element (like a div) for only 2 seconds? Here is what I have tried so far: HTML: <div class="custom-div">bar</div> <input class="button" type="button" value="press me" /> JQuery: $ ...

javascriptjqueryhtmlcss

Incorporating the Material UI App Bar alongside React Router for an enhanced user

For my web development course project, I am venturing into the world of JavaScript and React to create a website. Utilizing Material UI's appbar for my header design, I have successfully incorporated react router to enable navigation on my site. Howev ...

javascriptreactjsreact-routermaterial-ui