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

    }
}
});

ここにフィドルがあります

私がやろうとしていること:

ここで、同じかどうかに基づいて「変更」列の色を変更したいと思います。同じである場合、色は緑、そうでない場合は赤になります。

私の問題

列の色を変更することはできますが、選択に混乱しています。選択解除時にclも削除する必要があります。このアプローチは正しいですか、それともこれを達成するための他の方法はありますか? 任意のヘルプは aprreciated.Thank です。

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

.x-grid-row-selected選択した行にもカラー マーカーが表示されるように、class を持つ行に CSS ルールを追加することもできます。

于 2013-05-28T13:20:15.690 に答える