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

Share a URL and display small previews from it - php

Have you ever noticed that on certain websites, such as Facebook, when you post a link it automatically displays thumbnails from the linked website? Like in the image below: Ever wondered how to achieve that effect? ...

javascriptphpjqueryajax

Shade within the autocomplete

Is there a way to make the color property warning work on my autocomplete element at all times, rather than just on focus? Any suggestions or workarounds? Check out this code sandbox for reference. I really want the warning color to be visible constantly ...

javascriptreactjsmaterial-ui

Utilizing Protractor's advanced filtering techniques to pinpoint the desired row

I am trying to filter out the specific row that contains particular text within its cells. This is my existing code: private selectTargetLicense(licenseName: string) { return new Promise((resolve => { element.all(by.tagName('clr-dg-tab ...

javascriptangulartypescriptprotractor

Issue: TableHead inside an Expandable Row in MUI-Datatable is being duplicated for each row, causing the table to not be centered.Explanation: The

Can anyone help me with this issue? I'm having trouble with my table where the headings are repeating for every row and the table is stuck on the far right side. How can I center the table instead? Codesandbox: https://codesandbox.io/s/xenodochial-fo ...

javascriptreactjsmaterial-uimui-datatable

Why is my ASP.NET checkbox losing its value after postback because of a JavaScript/jQuery array?

I'm facing an issue with a simple asp:RadioButtonList nested inside a form tag where it's not retaining its value on postback. Here's the code snippet: <form runat="server"> <div class="Form"> <span class="FirstField"> ...

javascriptasp.netjquerycheckbox

How can you send an error message from Flask and then process it in JavaScript following an AJAX request?

So I have successfully created a Python backend using Flask: @app.route('/test/') def test(): data = get_database_data(request.args.id) # Returns dict of data, or None if data is None: # What should be the next step here? re ...

javascriptpythonajaxpython-3.xflask

Enhance your React Native app: Utilizing dynamic string variables with react-native-google-places-autocomplete query

I have encountered an issue while attempting to pass a dynamic country code to restrict search results. Here is the code in question: let loc = 'de' <GooglePlacesAutocomplete placeholder="Search" autoFocus={true} onPress ...

javascriptreactjsreact-nativegoogle-places-api

What are the steps to correctly implement async await in a standard sequence?

When I press the button onPress={() => Login()} First, I need to obtain a token by using the signInWithKakao function. Secondly, right after acquiring the token, if it is available, I want to dispatch the profile using the kakaoprofile function. However, ...

javascriptnode.jsreactjsreact-native

The sequence of Angular directives being executed

When multiple directives are applied to an element in AngularJS, what determines the order in which they will be executed? For instance: <input ng-change='foo()' data-number-formatter></input> Which directive, the number formatter ...

javascriptangularjs

Troubleshooting JavaScript Functions Failure Following AJAX XML Request

My current project involves developing an interactive map where users can select a year from the timeline and apply filters. This functionality is achieved through XML HttpRequest, which refreshes the SVG each time a selection is made. The SVG code for th ...

javascriptajaxsvgtooltipzooming

Express.js - What is the method to determine the total number of routes set up in my application?

Is there a way to calculate the total number of routes set up in Express.js without manually counting them? I have defined routes throughout my application and they are not grouped together, so I can't use a counter inside each one. I've searche ...

javascriptexpress

Exploring the Touch Feature in Angular

I am facing an issue with touch events as I am not receiving any useful X/Y coordinates. The event object does not provide the necessary information I need for touch events (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). Despi ...

javascriptangularjscanvastouch

An error occurred while trying to load the resource in the Redux-Saga: connection refused

Utilizing axios allows me to make calls to the backend server, while redux-saga helps in managing side effects from the server seamlessly. import {call, put, takeEvery} from "redux-saga/effects"; import {REQUEST_FAILED, REQUEST_SUCCESS, ROOT_URL, SUBMIT_U ...

javascriptreactjsaxiosredux-saga

Retrieving HTML Content with Ajax

Currently using this script for an assignment in my class. Still learning! The script checks whether a site is down or not. I want to expand this script to display statuses for each website in the table without duplicating the script. Any suggestions on ...

javascriptjqueryajax

Refresh element once AJAX call is completed successfully

Issue Despite a successful AJAX request, I am encountering difficulties updating an element on the webpage. JavaScript Code $(function() { $(".upvote").click(function() { var id = $(this).parent().find("input").val(); $.ajax( ...

phpjavascriptjqueryajax

Utilize JavaScript to activate a new browser tab and monitor its status for closure

When I attempt to open a new tab using JavaScript and track when it is closed, none of the events are being triggered. All the examples I found reference the onbeforeunload event for the current window, not for other window objects. window.addEventListe ...

javascript

The element's position remains unchanged after the .click re-event in the function

Welcome to my first attempt at using jQuery! Please bear with me as I navigate through this learning process. Here's the challenge: I have a series of elements in my HTML. <div class="garden"> <div class="point left">&#9668;</d ...

javascriptjqueryhtmlcss

Issue with fullPage.js - Unable to scroll to footer on the last section of the page

I'm currently working with the fullPage.js plugin () and encountering some issues. While sliding through each section, everything functions as expected. However, when I reach the last section and try to scroll down to the footer below it, I encounter ...

javascriptjqueryhtmlcssfullpage.js

Exploring a section of a react-chartjs Pie chart

I'm currently exploring how to create a static Pie chart using react-chartjs-2. Wanting to make one slice stand out more than the others, I aim to have it appear larger: My focus is on accessing a specific slice in the pie chart and adjusting its out ...

javascriptreactjschartschart.jsreact-chartjs

Using async await in a React component causes a syntax error

Struggling with setting up a basic react app using hapi.js on the server-side, I am diving into the world of webpack and babel as a newcomer. Here's a glimpse at my React component App.jsx: import React from 'react'; export default class A ...

javascriptreactjsasync-await