如何根據行的選擇和某些條件檢查來更改網格中的列的顏色

Question

我試圖根據選擇更改列的顏色。這裏是我迄今嘗試過的。

var selectionmodel = Ext.create('Ext.selection.CheckboxModel'); 
Ext.create('Ext.data.Store', { 
storeId:'simpsonsStore', 
fields:['name', 'email', 'change'], 
data:{'items':[ 
    { 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 }, 
    { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 }, 
    { 'name': 'Homer', "email":"home@simpsons.com", "change":100 }, 
    { 'name': 'Marge', "email":"marge@simpsons.com", "change":-20 } 
]}, 
proxy: { 
    type: 'memory', 
    reader: { 
     type: 'json', 
     root: 'items' 
    } 
} 
}); 

Ext.create('Ext.grid.Panel', { 
id : 'sgrid', 
title: 'Simpsons', 
store: Ext.data.StoreManager.lookup('simpsonsStore'), 
selModel:selectionmodel, 
columns: [ 
    { header: 'Name', dataIndex: 'name' }, 
    { header: 'Email', dataIndex: 'email', flex: 1 }, 
    { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }// 
], 
height: 200, 
width: 400, 
renderTo: Ext.getBody(), 
listeners:{ 
    selectionchange: function(thisobj, selected, eOpts){ 

     var store = Ext.getStore('simpsonsStore'); 
     var grid = Ext.getCmp('sgrid'); 
     var selected = grid.getSelectionModel(); 
     var count = store.getCount(); 
     var items=[]; 
    // grid.getView.removeCls("price-fall"); 
     for(i=0;i<count;i++){ 
      if(selected.isSelected(i)){ 
       items.push({ 
           "change"  : store.getAt(i).data.change 
          }); 
      } 
     } 
     for(i=0;i<items.length;i++){ 
      for(j=i+1;j<items.length;j++){ 
       if(items[i].change == items[j].change){ 
         grid.getView().addRowCls(i, "price-fall"); 
         grid.getView().addRowCls(j, "price-fall"); 
       } 
      } 
     } 

    } 
} 
}); 

這裏是fiddle

我所試圖做的事：

在這裏，我想改變基於列'變'的顏色是否相同。如果相同則顏色應爲綠色，否則應該是紅色。

我的問題

我能夠改變柱的顏色，但與selection.The CLS越來越混亂也應deselection.Is去除這種做法是正確的，或者是他們的任何其他方式來實現這一目標？任何幫助都被誇大了。謝謝。

Answer 1

你的方法很好，你幾乎在那裏。您對於如何使用記錄（模型）似乎有點困惑。

只要使用此功能爲您的selectionchange處理程序，將工作：

// selected is an array of models (remember you have multiple selection enabled 
// in you grid) 
function(selModel, selected){ 
    var grid = Ext.getCmp('sgrid'), 
     store = grid.getStore(), 
     view = grid.getView(), 

     selectedChanges = {}, 

     sameCls = 'change-same', 
     diffCls = 'change-diff'; 

    // build a map of change values that will be considered as "same" 
    Ext.each(selected, function(record) { 
     selectedChanges[record.get('change')] = true; 
    }); 

    // loops through all records and update their css class according to their 
    // change value 
    store.each(function(record) { 

     // isn't that more expressive that accessing it through the store's item? 
     var change = record.get('change'); 

     if (selectedChanges[change]) { 
      // addRowCls can accept model as its first arg 
      view.addRowCls(record, sameCls); 
      view.removeRowCls(record, diffCls); 
     } else { 
      view.removeRowCls(record, sameCls); 
      view.addRowCls(record, diffCls); 
     } 
    }); 
} 

您可能還需要爲了添加CSS規則與.x-grid-row-selected類行對你的顏色標記出現在選定行（ s）。