Как изменить цвет фона ячейки extjs в зависимости от изменения значения? - PullRequest
Новая
       27

Как изменить цвет фона ячейки extjs в зависимости от изменения значения?

22 голосов
/ 07 ноября 2011

Чтобы изменить цвет фона всей строки, мы можем использовать getRowClass, но как сделать ту же логику только для одной ячейки и определенного столбца .... какие-либо идеи? 

//EXTJS
viewConfig: {
    getRowClass: function(record, index) {
        var c = record.get('change');
        if (c < 0) {
            return 'price-fall';
        } else if (c > 0) {
            return 'price-rise';
        }
    }
}

//CSS
.price-fall { 
        background-color: #FFB0C4;
}
.price-rise {
        background-color: #B0FFC5;
}

EDIT:

Есть способ сделать это с: 

 function change(val){
    if(val > 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
    }else if(val < 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
    }
    return val || 0;
}

, а затем просто: 

...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...

но таким образом сетка деформируется при переходе с белого на цветной фон ... ???

есть еще идеи?

EDIT
После того, как пользовательский CSS применяется к столбцу, как удалить его за короткий промежуток времени, чтобы он отображался мигать один раз, когда значение изменилось? Что-то вроде setTimeout("remove-css()",1000); или с Ext.Function.defer(remove-css, 1000);
Есть идеи?

Ответы [ 3 ]

35 голосов
/ 07 ноября 2011

Я предлагаю использовать getRowClass с применением дополнительных cls к нужным столбцам: 

Ext.create('Ext.grid.Panel', {
    columns: [
        // ...
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' },
        // ...
    ],

    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    // ...
});

CSS: 

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

Вот демо .

11 голосов
/ 27 февраля 2013

Есть также другой метод, который я нашел, когда я делаю что-то другое;

В определении столбца: 

{
    dataIndex: 'invoicePrintedFlag', 
    header: 'Fatura',
    width: 50,
    renderer : function(value, metadata, record) {
        if (record.get('invoiceAddressId') != null){
            metadata.tdCls = metadata.tdCls +" alertedCell";
        }

        return '<span class="iconbox icon-'+ value +'"></span>';
    }
}

вы можете использовать renderer, если вы полностью манипулируете клеткой, вот вам metadata: 

metadata: Object {tdCls: "", style: ""}

если вы используете стиль, он будет добавлен в контент DIV внутри TD 

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067" id="ext-gen1432">
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style=" text-align: left;" id="ext-gen1426">
    // Content comes here
    </div>
</td>

если вы используете tdCls, он будет добавлен к классу attr из TD 

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067   alertedCell " id="ext-gen1462">
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: left;" id="ext-gen1463">
    // Content comes here
    </div>
</td>

Также вы можете вернуть html, как хотите.

2 голосов
/ 15 января 2014 
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {

  metaData.tdAttr = 'style="background-color:#b0e987;color:black;"';

  value=Ext.util.Format.number(value, '$ 0,000.00');

  return value;

},
...