extjs - extjs4 行のスタイリング

Question

グリッド行に条件付きスタイルを設定しています。最初はスタイルが機能しますが、データの変更には応答しません。列を編集してマイナス値にすると、そのスタイルを赤に戻したいとしましょう。

私は試した

grid.doLayout();
grid.doComponentLayout();
grid.update();
grid.updateLayout()

行のcssを更新するようにグリッドを強制する方法（getRowClassをトリガーする方法、またはこれを行う他の方法はありますか）。

Answer 1

あなたがやろうとしていることは、グリッド上で同じ列モデルで実行する場合にのみ可能になります。reconfigureビューのプロパティをオーバーライドするgetRowClassと、grid.Panel 自体には何もありません。

gridReference.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
     // your code 
}

これについては、 JSFiddleの例を参照してください。

または、レンダラーを使用することもできます

レンダラーを使用しますが、今回はクラスを追加してセルのメタデータを変更します。これは、メタオブジェクトであるレンダラーの 2 番目のパラメーターを次のように変更することで実行できます。

var classRenderer = function(v,m) { 
    if (v=='Lisa') { 
        m.tdCls = 'demo' 
    } 
    return v; 
}

さらにJSFiddleがあります

Answer 2

列のレンダラー構成を使用できます...

 function change(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}

   function pctChange(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    collapsible: true,
    multiSelect: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        },
        {
            text     : 'Price',
            width    : 75,
            sortable : true,
            renderer : 'usMoney',
            dataIndex: 'price'
        },
        {
            text     : 'Change',
            width    : 75,
            sortable : true,
            renderer : change,
            dataIndex: 'change'
        },
        {
            text     : '% Change',
            width    : 75,
            sortable : true,
            renderer : pctChange,
            dataIndex: 'pctChange'
        },
        {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }
          ],
 height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    }
});