css मूल्य परिवर्तन के आधार पर extjs ग्रिड एकल सेल पृष्ठभूमि रंग कैसे बदलें?




grid extjs4 (3)

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;

},

पूरी पंक्ति पृष्ठभूमि रंग बदलने के लिए हम 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;
}

संपादित करें:

इसके साथ ऐसा करने का एक तरीका है:

 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'}
...

लेकिन इस तरह ग्रिड सफेद से रंगीन पृष्ठभूमि में परिवर्तनों पर विकृत हो जाता है ... ???

कोई अन्य विचार?

संपादित करें
कॉलम पर कस्टम सीएसएस लागू होने के बाद, इसे थोड़े समय में कैसे हटाया जाए, इसलिए मान बदल जाने पर यह एक बार झपकी लग रहा है ? कुछ setTimeout("remove-css()",1000); या Ext.Function.defer(remove-css, 1000);
कोई विचार?


मैं आवश्यक कॉलम के लिए अतिरिक्त getRowClass लागू करने के साथ getRowClass का उपयोग करने का सुझाव देता हूं:

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';
            }
        }
    },
    // ...
});

सीएसएस:

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

यहां demo


जब मैं एक और चीज कर रहा हूं तो मुझे एक और तरीका भी मिला है;

कॉलम परिभाषा में:

{
    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 :

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

यदि आप शैली का उपयोग करते हैं तो इसे टीडी के अंदर सामग्री डीवी में जोड़ा जाएगा

<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 उपयोग tdCls , तो इसे टीडी के वर्ग tdCls जोड़ा जाएगा

<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>

आप चाहें तो एचटीएमएल वापस कर सकते हैं।







row