Question

我使用extjs4

我有一个网格，我想在gride中添加与条件相关的图标

我有一个css类

但图标显示多次的问题

我的代码css：

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

我的代码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() {
                            }
                        }

                        ]
                    }]

});

现在我尝试使用此代码：

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

无错误地工作

现在我想添加工具提示

的概念

我尝试用以下代码修改我的代码：

 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() {
                                }
                            }

                            ]
                        }]

    });

我的目标是当我将光标移动到图标时我想要显示此消息“当前状态：...”，

该法规将显示与 statut_reqUPReliance

的值相关

所以我认为我应该添加工具提示

的测试

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

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


         }

Answer 1

您需要在CSS中设置background-repeat: no-repeat;。

Answer 2

在你的css文件中试试这个：

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

使用extjs4在网格中显示图标

2 个答案: