1

別の列の値の値に応じて 1 つの列の css を変更する必要がある Extjs エディター グリッド パネルがあります。その方法はオンロードで動作するため、レンダラー関数を使用できません。コードを添付する他の方法はありますか?私は性別の列とIDの列を持っているので、性別の列が男性を選択すると、IDの背景色がピンク色に変わるはずです。

  {
            id: 'value',
            name: 'value',
            header: 'Gender',
            dataIndex: 'insured',
            width: 100,
            editor: new fm.ComboBox({

                typeAhead: true,
                displayField: 'gender',
                mode: 'local',
                transform: 'gender',
                triggerAction: 'all',
                selectOnFocus: true,
                forceSelection: true,
                stripeRows: true,
                lazyRender: true,
                listeners: {

                    }
                }
            })
        },
  {
        id: 'ID',
        name: 'ID',
        header: 'ID',
        dataIndex: 'ID',
        width: 100,
        hidden: true,
        editor: new fm.TextField({
            allowBlank: true,
            maxLength: 500
        })
    }
4

1 に答える 1

0

これは単純なレンダリングで機能します

CSS:

.custom-column
{
    background-color: #ccc; 
}

JavaScript:

columns: [{
    dataIndex: 'name',
    renderer: function (value, meta) {
        meta.css = 'custom-column';
        return value;
    }
}]

編集：

を使用getRowClassして、レンダリング中にカスタム CSS クラスを行に適用できます。

この関数をオーバーライドして、レンダリング中にカスタム CSS クラスを行に適用します。この関数は、行のラッピング div に追加される CSS クラス名 (または何もない場合は空の文字列 '') を返す必要があります。複数のクラス名を適用するには、文字列内で空白で区切って返すだけです (例: 'my-class another-class')。

Javascript:

columns: [{
    dataIndex: 'ID',
    ...
    tdCls: 'ID' //add table css class
}],

viewConfig: {
    getRowClass: function(record, index) {
        var gender = record.get('insured');

        if (gender === 0) {
        //male
            return 'gender-male';
        } else if (gender === 1) {
        //female
            return 'gender-female';
        } else {
        //unknown
            return 'gender-unknown';
        }
    }
}

追加のCSS:

.gender-male .ID {
    background-color: #088da5;
}
.gender-female .ID {
    background-color: #f799af;
}
.gender-unknown .ID {
    background-color: #BADA55;
}
于 2013-02-27T12:15:41.250 に答える