Как изменить цвет столбца в сетке на основе выбора строки и проверки некоторых условий

Я пытаюсь изменить цвет столбца на основе выбора. Вот что я пробовал до сих пор.

var selectionmodel = Ext.create('Ext.selection.CheckboxModel');
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
    { 'name': 'Lisa',  "email":"[email protected]",  "change":100  },
    { 'name': 'Bart', "email":"[email protected]", "change":-20  },
    { 'name': 'Homer', "email":"[email protected]",  "change":100   },
    { 'name': 'Marge', "email":"[email protected]", "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" );
                }
            }
        }

    }
}
});

Вот скрипта

Что я пытаюсь сделать:

Здесь я хочу изменить цвет столбца 'change' в зависимости от того, совпадает ли он или нет. Если он такой же, тогда цвет должен быть зеленым, в противном случае он должен быть красным.

Моя проблема

Я могу изменить цвет столбца, но запутался с выбором. При отмене выбора также следует удалить cls. Правилен ли этот подход или есть ли какой-либо другой способ добиться этого? Любая помощь приветствуется. Спасибо.


gridview extjs extjs4 extjs4.2
person Dev    schedule 28.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ты подходишь довольно хорошо, и ты почти у цели. Вы только немного запутались в том, как работать с записями (Модель).

Просто используйте эту функцию в качестве обработчика 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, чтобы ваши цветовые маркеры также отображались в выбранных строках.

person rixo    schedule 28.05.2013
comment
Спасибо, rixo. Такой подход к построению карты действительно полезен. - person Dev; 29.05.2013