ExtJS の DataGrid にスタイルシートを適用

Ajax JavaScript

Ext JS の DataGrid のセルや行の文字色や背景色を変更するには、以下のような class のスタイルを変更する。

  • セルのスタイル指定 -> x-grid3-cell-inner
  • 行のスタイル指定 -> x-grid3-row
  • 選択行のスタイル指定 -> x-grid3-row-selected
  • ストライプ行のスタイル指定 -> x-grid3-row-alt
  • マウス行のスタイル指定 -> x-grid3-row-over

なお、選択行の背景色を指定する場合は !important で優先度の指定を行う必要があった。

<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<style type="text/css">
    /* 行の背景色 */
    .x-grid3-row {
        background: #FAFFFF;
    }

    /* ストライプ行の背景色 */
    .x-grid3-row-alt {
        background: #EEEEFF;
    }

    /* 選択行の背景色 */
    .x-grid3-row-selected {
        background: #EEFFEE !important;
    }

    /* マウスオーバー行の背景色 */
    .x-grid3-row-over {
        background: #FFEEEE;
    }

    /* セルの文字色 */
    .x-grid3-cell-inner {
        color: #0000FF;
    }

    /* 選択行のセルの文字色 */
    .x-grid3-row-selected .x-grid3-cell-inner {
        color: #FF0000;
    }
</style>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
<!--
    Ext.BLANK_IMAGE_URL = "ext-2.0/resources/images/default/s.gif";

    Ext.onReady(function() {
        ・・・
        var grid = new Ext.grid.GridPanel({
            ・・・
        });
        grid.render('grid-sample');
    });
//-->
</script>
</head>
<body>
<div id="grid-sample"></div>
</body>
</html>