Sencha ExtJs[4.2]: Is it possible to selectively disable a single action button in the handler function for a column item?

Here is a code snippet example:

Ext.create("Ext.tree.Panel", {
    renderTo: $(".gsBasciInfo")[0],
    store: "basic_grid_store",
    useArrows: true,
    rootVisible: false,
    columns: {
        items: [{
            text: 'id',
            dataIndex: 'id',
            align: "right",
        }, {
            xtype: 'actioncolumn',
            items: [{
                xtype: 'button',
                iconCls: 'icon-edit',
                tooltip: 'Edit',
                handler: function(view, rowIndex, colIndex, item, e, record) {
                    item.disable();
                    //do something in the background
                    item.enable();
                }
           }]
        }]
    }
});

If I have a grid panel like the one above, I want to disable only the clicked button and run some background process before enabling it again.

The current approach disables the entire column of buttons, which is not intended. What should I do to achieve my desired functionality? Thank you!

javascriptextjs

Answer №1

item.disable() is used to disable an entire column, which appears to be the correct approach according to this method.

If you encounter this issue, one workaround is to create your own logic for disabling and enabling. You can refer to parts of the original disable/enable methods to guide you in implementing your custom code. Here's a basic example of how you can handle this:

handler: function(view, rowIndex, colIndex, item, e, record) {
    var me = this;

    if (me.disabledEl === e.target) {
        return;
    }

    me.disabledEl = e.target;
    Ext.fly(e.target).addCls(view.disabledCls);

    //perform necessary actions

    Ext.fly(e.target).removeCls(view.disabledCls);
    me.disabledEl = null;
}

You can view a demonstration of this workaround here.

Additionally, there is no requirement to specify xtype: 'button'. ExtJs will automatically use a clickable <img> element in any scenario.

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

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

javascriptphpajaxmysqli

What is the method to execute the onclick command once a selection has been made from the drop-down menu?

Whenever I click on the dropdown menu, the function reload is triggered immediately. How can I make the reload function run only after selecting an item from the dropdown menu? Any assistance would be greatly appreciated. <form><select name="st ...

javascriptdrop-down-menuonclick

Encountering 404 errors on dynamic routes following deployment in Next.JS

In my implementation of a Next JS app, I am fetching data from Sanity to generate dynamic routes as shown below: export const getStaticPaths = async () => { const res = await client.fetch(`*[_type in ["work"] ]`); const data = await re ...

javascriptnext.jsnetlifysanity

Upgrade from Next.js version 12

Greetings to all! I have recently been assigned the task of migrating a project from next.js version 12 to the latest version. The changes in page routing and app routing are posing some challenges for me as I attempt to migrate the entire website. Is ther ...

javascriptreactjsnode.jstypescriptnext.js

Modifying data on the fly for a Highcharts series

My chart is currently functioning well with data in the options. However, when I leave the data empty for a series and attempt the following code (in order to change the data based on a click event), it fails to work. Any suggestions on how I can rectify ...

javascriptarrayshighchartsboxplot

Uncover the secrets of HTML with JavaScript

I'm facing an issue with extracting data from a link's data attribute and trying to decode the HTML within it, but unfortunately, it's not functioning as expected. Check out my code on JSFiddle: http://jsfiddle.net/Kd25m/1/ Here's the ...

javascriptjquery

Could anyone clarify the workings of the async function in this specific useEffect situation?

Within a child component, there is an onClick event: onClick={()=>{ //2. an image is clicked, and the choice is added to the choiceOrder state, and then a jsonupdate is called -- 3. in ChooseBy.js //onclick, add or remove the choice choosebyprop ...

javascriptreactjsnext.js

I have a project where I'm tasked with assembling a collection of images sourced from an Array populated with JSON

For a homework assignment, I am tasked with creating a basic gallery that showcases 4 images. My goal is to store all the images in an array, with each photo represented as a JSON object, and then load these images from the array. Here is my progress so fa ...

javascripthtmlarrays

Arranging objects in an array using EJS

I'm struggling to sort an array of objects in EJS that is sent from the server in Node.js. The array contains various lesson details. Here's the joinLecture.js file where the array is passed to EJS: res.render("lectureSearch", {searchDa ...

javascripthtmlarraysobjectejs

Struggling with Nuxt 3 Firebase and VueFire: unable to get useCurrentUser to work

Currently, I am attempting to implement VueFire's useCurrentUser() function within a Nuxt 3 application that does not utilize Server Side Rendering. I have properly configured vuefire in my nuxt.config.ts file as outlined in the documentation. export ...

javascriptfirebasefirebase-authenticationnuxt.jsvuefire

Is it possible to divide searches into separate divs?

How can I display the results of my AJAX live search in different result divs for styling purposes? I want to style the results separately and have them appear one at a time. However, the current setup with 'element.style' is causing issues. Is ...

javascriptphpjqueryhtmlcss

Encountering a 400 error message (Bad Request) when attempting to send a "POST" request via Ajax to a website built on the

I've been struggling to successfully create a "Post" using ajax. However, every time I attempt to do so, I encounter a "400 (Bad Request)" error. I am unsure whether the issue lies within the Rails website or my ajax request. The Rails setup is just a ...

javascriptruby-on-railsajaxpost

Retrieving the path parameter in a Next.js APIabstractmethod

I need assistance with extracting information from the file routes/api/[slug]/[uid].ts Specifically, I am looking to retrieve the slug and uid within my handler function. Can anyone provide guidance on how to achieve this? ...

javascriptreactjsnext.js

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

javascriptcssnext.jshoverjsx

Change from using fs.writeFileSync to fs.writeFile

I have a question about changing fs.writeFileSync to fs.writeFile const users = { "(user id)": { "balance": 28, "lastClaim": 1612012406047, "lastWork": 1612013463181, "workersCount": 1, ...

javascriptnode.jsdiscord.js

What is the best way to assign a background color to each tr element using JavaScript?

I have a list of table rows with different background colors like <tr bgcolor="#OC6110"> <tr bgcolor="#000000"> <tr bgcolor="#FFFFFF"> Is there a way to assign unique background colors to each tr element without specifying its id value ...

javascripthtmlcss

Guide to selecting text within an unordered list on an HTML webpage without a distinctive identifier with Python Selenium

I am looking to automate the selection and clicking of the text 'Click Me Please' within a hyperlink using Python Selenium. The main challenge is that there is no distinct identifier for this item as it is nested within a list. The specific HTM ...

javascriptjquerypythonseleniumxpath

Ways to pass a message from index.html to a Vue.js 3 instance

Picture this scenario: You have a Vue index.html file that also loads a custom script: <!DOCTYPE html> <html lang="en"> <head> ... ... <script type="text/javascript"> languagePluginLoader.then(fun ...

javascripthtmlvue.jsvuexpyodide

If there is an error in retrieving data from the PHP file using `$.getJSON

Currently, I am integrating JSON into my login script and have included the following code snippet: $.getJSON("link to PHP where to get the JSON data from", function (data) { // THE CODE TO BE EXECUTED }); My question is, what is the most efficient way t ...

javascriptphpjsonif-statement

Obtaining the MapOptions object from a map using Google Maps API version 3

Previously in Google Maps api v2, you were able to retrieve map parameters like the type and zoom directly from the map object. However, in version 3, the setOptions method is used to configure parameters, but there is no equivalent method like getOption ...

javascriptgoogle-mapsgoogle-maps-api-3