1

我正在尝试根据选择更改列的颜色。这是我迄今为止尝试过的。

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" );
                }
            }
        }

    }
}
});

这是小提琴

我正在尝试做的事情：

在这里，我想根据是否相同来更改“更改”列的颜色。如果相同，则颜色应为绿色，否则应为红色。

我的问题

我可以更改列的颜色，但会弄乱选择。取消选择时也应该删除 cls。这种方法是否正确，或者他们是否有其他方法可以实现这一点？任何帮助都非常感谢。谢谢。

4

1 回答 1

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以便您的颜色标记也出现在选定的行中。

于 2013-05-28T13:20:15.690 回答