Updating the icon of an action column dynamically in Ext JS4

Using the getClass function to display icons in the action column: 

{
xtype: 'actioncolumn',
id:'actionColumnGridUsers',
width: 30,
hideable: false,
items: ['->',
    {
        getClass: function (v, meta, rec)
        {
            if (rec.get('nameUser') != '') return 'icon-edit';
            else return 'icon-add';
        }

    }
}

Here is the corresponding CSS code: 

.icon-add { background-image: url("../images/add.png"); }
.icon-edit { background-image: url("../images/edit.png"); }

The code appears to be correct, but for some reason, the icon is not being displayed. What could I be overlooking?

javascriptcssextjsextjs4

Answer №1

This is how I tackled the issue: 

{
    xtype: 'actioncolumn',
    id:'actionColumnGridUsers',
    width: 30,
    hideable: false,
    items:
        [{
            getClass: function(v, meta, rec) {
                if (rec.get('nameUser') != '') {
                    this.items[0].tooltip = 'delete';
                    return 'icon-delete';
                } else {
                    this.items[0].tooltip = 'edit';
                    return 'icon-edit';
                }
            }
        }]
}

Here's the corresponding CSS code: 

.x-action-col-cell img.icon-delete {
background-image: url("../images/delete.png");
}
.x-action-col-cell img.icon-edit {
    background-image: url("../images/add.png");
}

Answer №2

If you'd like, give this a shot:

iconCls: me.readOnly==true ? 'icon-view' : 'icon-edit',

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

Tips for replicating a float layout with CSS grid

In the layout I have designed, there is an image on the left and text content on the right. The structure resembles this: .left { max-width: calc(100% - 150px); float: left; } img { width: 300px; max-width: 100%; } <div class="wrapper"> ...

csscss-floatcss-grid

What could be causing the JSON.stringify() replacer function to fail?

Here is the code snippet I'm working with: http://jsfiddle.net/8tAyu/7/ var data = { "foundation": "Mozilla", "model": "box", "week": 45, "transport": { "week": 3 }, "month": 7 }; console.log(JSON.stringify(data, ...

javascriptjson

Requesting an image from the live website using a GET method

Recently, I registered a domain for my personal website. While the site is still a work in progress, I noticed that the logo image fails to display when viewed through the browser on the site. Surprisingly, it shows up perfectly fine when accessed via loca ...

htmlcssftp

What are some methods for creating a Venn Diagram that includes data within each section using SVG, CSS, or Canvas?

I am attempting to replicate this visual representation using pure SVG, CSS, or Canvas drawing. So far, I have successfully created three circles that overlap and placed a label in the center of each one. However, I'm facing challenges when it comes t ...

javascripthtmlcsssvgcanvas

A Guide to Triggering a Method Upon Component Change in Angular

When working with Angular, Components have an ngOnInit() method. I am looking for the opposite of this method. Is there a method that gets called when the component is closed? Is there a way to detect in the TypeScript file if the component is being clo ...

javascriptnode.jsangular

Unraveling the Mystery of jQuery Syntax

Upon reviewing jquery.ui-1.8.11.js: $.extend(Datepicker.prototype, { /* A unique class name appended to elements indicating they are configured with a date picker. */ markerClassName: 'hasDatepicker', /* For debugging purposes (if e ...

javascriptjquery

Troubleshooting AngularJS POST Request Error with Request Body

I am a beginner in AngularJs and I am trying to make a post request to a server with enum form. Currently, I have the following JavaScript code: function completeTaskAction2($scope, $http, Base64) { $http.defaults.headers.common['Authorization'] ...

javascriptangularjsformspostactiviti

Error in Three.js: THREE.Scene is not defined as a constructor

My code won't run due to this error message: TypeError: THREE.Scene is not a constructor I've sourced the three.js file from the official GitHub repository, and these are my files: index.html <html lang="en"> <head> <meta c ...

javascriptthree.js

What is the best way to organize a table with multiple state variables using nested loops?

What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...

javascriptarraysreactjsjsx

Customize Your Greasemonkey Script Timeout

At our organization, we utilize the Firefox Greasemonkey addon to automatically enter login credentials on a specific webpage upon opening it. Here is an example of what the script consists of: // ==UserScript== // @name logon // @namespace http ...

javascriptfirefoxgreasemonkey

Ways to retrieve the image URL from a div element?

How can I use PHP to extract the background image URL from a div? Specifically, I need to search for a specific class within the string and then extract the background-image URL. For instance: <div class="single-post-image" style="backgr ...

phpcssurlstring-parsing

Using Selenium to interact with drop-down lists using div tags instead of select tags

As a newcomer to automated testing using Selenium Web Driver, I am struggling to test drop down lists for the location type without relying on the select command. The element in question is enclosed within a div tag. I attempted sending keys but that meth ...

javascriptpythonhtmlseleniumweb-scraping

React: Store numerous identical input fields in a single state container

Currently, I have three identical input fields formatted as phone numbers. Each field has its own state and handle method, creating unnecessary repetition in the code. The UI components used are from the Material-UI library, with phone number formatting a ...

javascriptreactjsmaterial-designmaterial-ui

A JavaScript functionality that accepts an array as an argument

Currently, I'm in the process of developing a JavaScript function that accepts an array as an argument and returns the first item in the array. The function should be able to handle arrays of any size. While my current implementation seems to be effec ...

javascriptarraysfunction

Utilize JSON data to display markers on Leaflet maps

I am exploring the world of Leaflet and I have a question about loading markers from a database into a leaflet map using PHP. In my PHP code, I extract latitude and longitude data from the database based on the selected ward and encode it in JSON format. ...

javascriptjsonleaflet

Adjusting the format of a JavaScript object

Looking at the object below: {A: 52, B: 33} I want to transform it into this format: ["A", 52], ["B", 33] Any recommendations on how to achieve this conversion? ...

javascriptjqueryjson

Learn the technique of swapping out a portion of a string with a value from an input field in real-time

My webpage has a form on the left side where users can input text, and on the right is some static text. I want the text on the right to update automatically as the user types in the input field on the left. In my HTML code, it looks something like this - ...

javascriptjqueryhtml

Updating image attributes using jQuery within an .each loop

My challenge involves a textarea where I paste HTML code, followed by a button that should display all the images from that code along with their respective alt text and titles. The goal is to easily update the alt text and titles for each image individual ...

javascriptjqueryhtml

Transform a list separated by commas into an unordered list

Seeking a PHP, Jquery, or JavaScript method to convert comma-separated data into an unordered list. For clarification, I have uploaded a CSV file to WordPress where one section of content is separated by commas and I am looking to display it as a list. A ...

javascriptphpjquerywordpress

What methods can I use to streamline integration with minimal lines of code?

Seeking help with JavaScript: Recently dived into JavaScript and managed to create the desired functionality for my navigation menu. However, I suspect that my code is not optimized as I find myself repeating lines unnecessarily. Here's a snippet of ...

javascripthtml