GridPanel のセルに画像を表示 - ExtJS

JavaScript

Ext JS の GridPanel のセルに画像ファイルを表示させてみた。
やり方は非常に簡単。GridPanel の列定義で、該当列の renderer に画像表示の HTML 文字列（img タグ）を返す関数を設定してやるだけ。

今回、動作確認に使った環境は以下。

img_gridpanel.js
Ext.onReady(function() {
    var data = [
        ['ToDo - 技術調査', 'todo.png'],
        ['メトリクス測定結果', 'metrics_results.png']
    ];

    var store = new Ext.data.SimpleStore({
        fields: [
            {name: 'title'},
            {name: 'image'}
        ]
    });

    store.loadData(data);

    var grid = new Ext.grid.GridPanel({
        columns: [
            {header: 'Title', sortable: true, dataIndex: 'title', width: 100},
            {id: 'image', header: 'Image', dataIndex: 'image', 
                renderer: function(value) {
                    //画像表示のテンプレート
                    var tpl = new Ext.Template("<img width='{width}' height='{height}' src='{img}'></img>");
                    //テンプレートの適用
                    //{img}, {width}, {height}の箇所が指定の値で置換される
                    return tpl.apply({img: value, width: 300, height: 100});
                }
            }
        ],
        store: store,
        renderTo: 'grid-sample',
        width: 450,
        height: 250,
        stripeRows: true,
        autoExpandColumn: 'image'
    });
});

Image 列の renderer に img タグを使った HTML 文字列を返す関数を設定している。
Ext.Template を使うと {キー名} の箇所が apply の引数に与えたオブジェクトの該当する値で置換される。

img_gridpanel.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="img_gridpanel.js"></script>
</head>
<body>
<div id="grid-sample"></div>
</body>
</html>

上記 HTML を表示すると Image 列のセルに画像が表示される。