1

グリッド内の各セルは、いくつかの基準に基づいて、使用可能な 8 色から任意の色を取得できるという要件があります。その後、8 色の色の凡例とそのタグ名をグリッド パネルの下に表示する必要があります。ExtJS4にグリッド用のそのような機能があるかどうか、またはこの問題にどのようにアプローチできるかについてのアイデアがあるかどうか、誰かが私に提案できますか?

/** CSS の例 */

.r1 .x-grid-cell-inner {
background-color: #f0f6ff;
color: #09d6ff;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r2 .x-grid-cell-inner {
background-color: rgba(255, 183, 189, 0.22);
color: #900;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r3 .x-grid-cell-inner {
background-color: #e2ffe2;
color: #090;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r4 .x-grid-cell-inner {
background-color: rgba(255, 233, 228, 0.12);
color: #99890e;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r5 .x-grid-cell-inner {
background-color: rgba(186, 242, 250, 0.10);
color: #1a4f99;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r6 .x-grid-cell-inner {
background-color: rgba(255, 242, 239, 0.23);
color: #ff7f00;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r7 .x-grid-cell-inner {
background-color: rgba(228, 224, 255, 0.7);
color: rgba(29, 7, 255, 0.60);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r8 .x-grid-cell-inner {
background-color: rgba(255, 233, 228, 0.32);
color: rgba(255, 22, 12, 0.65);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.n1 .x-grid-cell-inner {
background-color: rgb(255, 255, 255);
color: rgb(255, 127, 0);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
4

2 に答える 2

1

私は似たようなことをしなければなりませんでした。

列の構成を使用して、値に基づいてセルに「色」クラスを適用しましたrenderer。

私の場合、値はセルの色を決定しました。

レンダラーは次のとおりです。

// ... other column configs
renderer: function(value, meta, record) {
    switch(value) {

        case 1 : 
            meta.tdCls = 'orange-cell';
            break;

        case 2 : 
            meta.tdCls = 'light-orange-cell';
            break;

        case 3 : 
            meta.tdCls = 'green-cell';
            break;   
    }

    // I only had a color in my cell without any kind of value
    // so didn't include the following return statement. I added it here
    // just so you would know that you can have it also.
    return value;
}

CSS クラスは次のようになります。

.orange-cell {
    background-color: #ffbb22 !important;
}
.light-orange-cell {
    background-color: #33cc55 !important;
}
.green-cell {
    background-color: #ffeecc !important;
}

これは ExtJS 4.1.0 で正常に動作しています

于 2012-08-01T23:18:31.390 に答える
0

そのようなものをグリッド定義に追加します。

viewConfig: {
  getRowClass: function(record, rowIndex, rowParams, store){
    return record.get("valid") ? "row-valid" : "row-error";
  }
}

詳細については、 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClassを参照してください。

注：これは個々の行で機能します。セルごとのカラーリングが本当に必要ですか?

于 2012-08-01T22:53:50.657 に答える