0

ExtJS でグリッドをカスタマイズするためにカスタム CSS を取得しようとしました。cls 入力に苦労していましたが、別の方法でうまくいきました。私が欲しいのは、値に関する行全体を強調表示することです ビュー のコードは次のとおりです。

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'Test ',
store: 'Users',

initComponent: function() {

this.columns = [
   {header: 'ID du CPE', width: 150, dataIndex: 'ID',  flex: 0},
       {header: 'Modèle', dataIndex: 'Modele', flex: 1},
   {header: 'Firmware', dataIndex: 'firmware', flex: 1},
   {header: 'Année MeS', dataIndex: 'annee', flex: 1},
   {header: 'Alerte', dataIndex: 'statut', hidden: true, hideable: false, flex: 0},
   {header: 'Etat', id:'CC', dataIndex: 'alerte', flex: 0, width: 100}

CSSに私のコードがあります：

.x-grid-table .x-grid-row-selected  .x-grid-cell-CC {
background-color: #1DAE00 !important;  }  
.x-grid-table .x-grid-row-over .x-grid-cell-CC {
background-color: #1DAE00 !important;  }

今のところ、動作します (id=CC は css ファイルとのリンクを作成します)。線の上にマウスを移動するか、線をクリックすると、「Etat」列に関係する値が緑色で強調表示されます。cls メソッドを試しましたが、うまくいきませんでした。主な理由は、私が見つけたすべてのチュートリアルで、それを行う古典的な方法は次のとおりです。

Ext.create('Ext.grid.Panel', { 
cls: 'CC',

しかし、私の場合、私は持っています：

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',

cls属性をどこに置くべきかわかりません。いくつかの方法を試しましたが、いつもエラーになります。

だからここに私の2つの質問があります：1-行全体を強調表示する方法（単一の列からの行だけでなく）

よくわからない場合は申し訳ありません:s。

4

2 に答える 2

8

getRowClassグリッドのビュー構成でメソッドを提供する必要があります。このような：

    ,viewConfig: {
        getRowClass: function(record) {
            return record.get('highlight')
                ? 'highlight'
                : '';
        }
    }

グリッドパネルから拡張されたクラスでそれを行う方法の完全な例を次に示します。

Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'

    ,store: {
        fields: ['foo', 'bar', 'highlight']
        ,proxy: {
            type: 'memory'
            ,reader: 'array'
        }
        ,data: [[1, 'Bar', false],[2, 'Baz', false],[3, 'Bat', true]]
    }

    ,columns: [
        {dataIndex: 'foo', text: "Foo"}
        ,{dataIndex: 'bar', text: "Bar"}
        ,{dataIndex: 'highlight', text: "Highlighted"}
    ]

    ,viewConfig: {
        getRowClass: function(record) {
            return record.get('highlight')
                ? 'highlight'
                : '';
        }
    }
});

これは、次の CSS ルールで機能します。ハイライトされた行 (スペースなし) をキャッチするセレクターと.x-grid-row.highlight、背景が TR 要素に直接適用されるのではなく、背景 TD に適用されることに注意してください。これは機能しません。

.x-grid-row.highlight .x-grid-td {
    background-color: palegreen;
}
于 2013-06-12T15:32:13.893 に答える