display icon in the grid using extjs4

Question

I work with extjs4

I have a grid and I want to add icon related to condition in the gride

I have a css class

but the probleme that the icon displays several times

my code css :

.contactIcon80 {
    background-image: url(/UrbanPlanning/theme/images/delete.png);
    width:80px!important;
    height:80px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}

my code extjs :

function showUpdated(value, metaData, record, rowIndex, colIndex, store) {

     if(record.get("statut_reqUPReliance")=="WaitingAccept") {

         metaData.css = ' contactIcon80';

     }
     return value;
     }

var RequestUPRelianceListGrid1 = Ext.create('Ext.grid.Panel', {
    id:'RequestUPRelianceListGrid1',
    store: RequestUPRelianceListGridStore,
    collapsible:true,
    title:'title',
    columns: [
        {xtype: 'checkcolumn', header: 'test',dataIndex: 'checked',  width: 60,listeners:{'checkchange': RequestUPRelianceGridSelectionChanged}},
        {text: 'numero', flex: 1, sortable: true, hidden:true, dataIndex: 'num_reqUPReliance'},

        {text: 'statut', flex: 1, sortable: true, dataIndex: 'statut_reqUPReliance', renderer: showUpdated}  
        ],

    columnLines: true,
    anchor: '100%',
    frame: true,
    height: 250,
    margin: '5 5 5 5',
    dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    ui: 'footer',
                    layout: {
                    pack: 'center'
                    },
                    items: [
                        { 
                            xtype: 'button',
                            text: 'new',
                             id:'new_R',
                            handler: function() {
                            }
                        }

                        ]
                    }]

});

now I tried with this code :

.contactIcon80{
    background-image: url("/UrbanPlanning/theme/images/delete.png") !important;
    background-position:center  !important;
    width: auto !important;
    background-repeat: no-repeat;
}

it work without error

Now I want to add the notion of tooltip

I try to modify my code with :

 function showUpdated(value, metaData, record, rowIndex, colIndex, store) { 

         if(record.get("statut_reqUPReliance")=="WaitingAccept") {

             metaData.css = ' contactIcon80';

         }
         return value;
         }

    var RequestUPRelianceListGrid1 = Ext.create('Ext.grid.Panel', {
        id:'RequestUPRelianceListGrid1',
        store: RequestUPRelianceListGridStore,
        collapsible:true,
        title:'title',
        columns: [
            {xtype: 'checkcolumn', header: 'test',dataIndex: 'checked',  width: 60,listeners:{'checkchange': RequestUPRelianceGridSelectionChanged}},
            {text: 'numero', flex: 1, sortable: true, hidden:true, dataIndex: 'num_reqUPReliance'},

            {text: 'statut', flex: 1, sortable: true, dataIndex: 'statut_reqUPReliance',tooltip: 'currentStatus',renderer: showUpdated}  
            ],

        columnLines: true,
        anchor: '100%',
        frame: true,
        height: 250,
        margin: '5 5 5 5',
        dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        ui: 'footer',
                        layout: {
                        pack: 'center'
                        },
                        items: [
                            { 
                                xtype: 'button',
                                text: 'new',
                                 id:'new_R',
                                handler: function() {
                                }
                            }

                            ]
                        }]

    });

my goal is when I moves the cursor to the icon I want that this message "current status : ..." will be displyed ,

the statut will be displyed related to the value of statut_reqUPReliance

so I think that I should add the test of tooltip

if(record.get("statut_reqUPReliance")=="WaitingAccept") {

             metaData.css = ' contactIcon80';
  // here I should disply the message of tooltip which is "WaitingAccept"


         }

Evan Trimboli Evan Trimboli · Accepted Answer · 2013-09-15T05:57:50

0

votes

You need to set background-repeat: no-repeat; in your CSS.

display icon in the grid using extjs4

2 Answers