【Ext JS】グリッドでの出力制御
2008.07.16 Author: Jas
以前紹介した、Editable Gridを含め、Ext JSで作成した表では、各セルの値と別に画面上の出力を制御することが可能です。
「ユーザの入力内容を加工して表示」や「値によってフォントの色を変更」など、柔軟なインタフェースを提供できます。
このような表を作成するのは簡単で、GridのColumnModel指定時に、各列のrender前の条件判定を記述します。
var cm = new Ext.grid.ColumnModel([
{
id: 'price',
header: '金額',
dataIndex: 'price',
renderer: function(val, x, rec) {
if (rec.get('price') <= 0) {
val = '<span style="color:red">' + val + '</span>';
}
return val;
}
}
]);
このようにstyleを指定して文字装飾を行っています。
styleの他、classを指定して表示を切り替えることもできます。
ただし、複数のタグを入れ子にすると、問題が発生します。
編集可能な表でセルの出力部分に2段以上の
やを指定すると、セルをクリックしてもエディタが表示されなくなってしまいました。
何も表示されていない部分であれば、クリック時にエディタが表示され、編集ができるようになるのですが、文字が出力されている部分をクリックすると、エディタが表示されなくなるようです。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
