Avoid triggering the resizecolumn event in ExtJS while the columns are still loading

Currently, I am involved in a project using ExtJS 6.2 and facing a challenge related to performing operations when the columns in a grid are resized. It seems like the suitable event for this task is columnresize. However, the issue arises because the columns are dynamically loaded from a database, causing this event to be triggered every time a new column is added. My preference would be to restrict this event to only fire after all columns have been loaded.

I attempted to use a flag (named lFirstInit) that would switch to false once the columns are successfully loaded from the database. Unfortunately, the columnresize event continues to trigger right from the beginning.

Any suggestions on how I can tackle this problem? Your help is greatly appreciated. Thank you.

View:

Ext.define('App.view.TMainBrowseGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.TMainBrowseGrid',

    requires: [
        'App.view.TMainBrowseGridViewModel',
        'App.view.override.TMainBrowseGrid',
        'Ext.view.Table',
        'Ext.grid.column.RowNumberer',
        'App.view.TMainBrowseGridViewController'
    ],

    controller: 'TMainBrowseGrid',

    config: {
        oParent: null,
        cBrwName: '',
        cCodForm: ''
    },

    viewModel: {
        type: 'TMainBrowseGrid'
    },

    flex: 1,

    columns: [
        {
            xtype: 'rownumberer',
            itemId: 'oColRowNum'
        }
    ],

    listeners: {
        columnresize: 'onGridpanelColumnResize',
    }

});

Controller

Ext.define('App.view.TMainBrowseGridViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.TMainBrowseGrid',

    onGridpanelColumnResize: function (component, column, width, eOpts) {
        // THINGS TO DO...
    }
});

Answer №1

We made the decision to move away from the 'columnresize' method and instead focus on performing these operations when a 'Close' button is clicked. I want to express my gratitude for the valuable suggestions we received, particularly from the individual who initially shared an answer below but later deleted it before I could select it as the preferred response. Here is the code snippet they provided:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1bdb8a2b091a2b8bca1a2bebfa2ffb2bebc">[email protected]</a>',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d0e1d1b2f1c06021f1c00011c410c0002">[email protected]</a>',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48c8b898196a4978d8994978b8a97ca878b89">[email protected]</a>',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac7cbd8cdcfead9c3c7dad9c5c4d984c9c5c7">[email protected]</a>',
        phone: '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    listeners: {
        columnresize: function(ct, column, width, eOpts){
            if(ct.containsFocus){ // The condition will be met during a column resize.
                alert('resize');
                console.log(`${column.text} Column resized`);
            }
        }
    }
});

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 is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

Problem with Ext.net TabPanel

I am encountering a problem with the Ext.net TabPanel. Every time the page containing the tab panel is opened for the first time after the application has been rebuilt, it throws an error Uncaught TypeError: Object [object Object] has no method 'getCo ...

In React, a singular reference cannot establish focus amidst an array of references

Scenario In this scenario, we are restricted to using only keyboard navigation without any mouse clicks. Imagine a situation where we have 10 table rows displayed on the screen. Each row contains a menu button for interaction. When the tab key is pressed ...

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

Looking to Share Your Words on Tumblr?

When it comes to interacting with Tumblr, I have no issues using the GET method. However, as soon as I attempt to use the POST method for my Tumblr blog, an error is thrown: ({"meta":{"status":401,"msg":"Not Authorized"},"response":[]}); Below is the cod ...

JavaScript - The progression of a virtual pet even when the user is offline

Currently, I am utilizing VueJS and MongoDB to develop an interactive virtual pet. Our approach involves storing user data in localStorage for easy access and retrieval. I'm exploring the concept of allowing the virtual pet to evolve autonomously (s ...

Why is the jQuery not functioning within the AngularJS function?

I am encountering an issue with writing jQuery inside an AngularJS function. I can't seem to figure out why it's not working properly. HTML <div> <span ng-repeat="image in post.postImages" ng-if="$index <= 3" ng-init="image.showD ...

Real-time filtering in personalized dropdown menu with search input

I have been attempting to create a custom list filter for input using a computed property. In one file, I am developing a widget, while in another file, I am implementing it. Below is the code snippet from the widget creation file: <template> ...

Trouble with RegExp functionality within prisma's aggregateRaw when using MongoDB

I'm currently learning about MongoDB and Prisma in JavaScript. The following code snippet shows a MongoDB query using Prisma's aggregateRaw method. In this case, the cond is used to perform a case-insensitive string comparison. For instance, if $ ...

Steps for connecting data to a react table

This is my first time working with React and I want to display the following data (id, name, status, and quantity): interface Goods { id: number; name: string; status: string; quantity?: number; } export const getGoods = (): Promise<Goods[]> ...

The encoding of Node.js using npm

Looking to install the validate .json file below using npm: { "name": "node-todo", "version": "0.0.0", "description": "Simple todo application", "main": "server.js", "dependencies": { "express": "~3.4.4", "mongoose": "~ ...

Somehow, my array only manages to traverse exactly half of its elements

Something odd is happening with my input tag in the HTML file where only half of my array elements are being processed. The input collects numbers/letters and assigns a line of code, like this: let result = Object.fromEntries( Object.entries(answers2).m ...

NextJS allows for custom styling of Tiktok embeds to create a unique and

Currently, I am in the process of constructing a website that integrates Tiktok oEmbed functionality. Thus far, everything is running smoothly, but I have encountered an issue - how can I customize the styling to make the body background transparent? I ha ...

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

Is there a way to retrieve the password of the currently logged in user using Keycloak in JavaScript?

Does anyone know how to access the password of a logged-in user in a React application using Keycloak? I have successfully retrieved most of the necessary information from the idToken, like this: keycloak.init({ onLoad: 'login-required'}).then(fu ...

Stripping away HTML tags from a JSON output

I'm attempting to retrieve a JSON result using jQuery. $.ajax({ type: "GET", url: "http://localhost:8080/App/QueryString.jsp?Query="+query, contentType:"text/html; charset=utf-8", dataType: "json", success: function(json) { if(data!="") ...

Aggregate information from an array containing multiple nested arrays

With regards to marking this as answered by another question, please take note that this is not a flat array but an array of arrays. Additionally, the numbers provided are just examples for visual representation. I am attempting to iterate through an arra ...

Leveraging packages obtained from npm repositories

Recently, I came across this guide about React that included a paragraph that left me puzzled. According to the guide, CommonJS modules (found in npm) cannot be directly used in web browsers due to technical limitations. Instead, you need a JavaScript " ...