ExtJsのグリッドで、セルのwhite-spaceをnormalにする方法

ExtJsのグリッドはデフォルトだと、長いセルは自動で省略されます。
しかし、高さのある行だと、行を折り返した方がいい場合があります。

要はこのような場合ですね。これで1行しか表示されないとちょっと嫌ですね。


そこで、Ext.grid.Columnのコンフィグオプションのcssを利用すればよさそうです。

css : String
オプションです。ヘッダー部分を除く、カラムのテーブルセル全てに適用される、インラインスタイル定義文字列を設定します(初期値 未定義)。

(Ext 3.0 - API Documentation 日本語版)

しかし、

{header:"自己紹介",dataIndex:"description",sortable: true,width:240,css:"white-space: normal;"},

のようにしても変化がありません。

実はグリッドの実データというのは、divタグがtableのtdタグに挟まれています。
このcssというオプションは、tdタグのstyle要素を追加するものなんですね。

変化しなかったのは、extjs-all.cssの2149行目付近の

.x-grid3-cell-inner, .x-grid3-hd-inner
overflow: hidden;
padding: 3px 3px 3px 5px;
text-overflow: ellipsis;
white-space: nowrap;

のwhite-spaceとtext-overflowが優先されて、せっかくのcss:"white-space: normal;が無効になっていたからなんです。
そこで、cssをオーバーライドしてあげればOKです!

.x-grid3-col-4{white-space:normal;}

CSSセレクタは適宜変更してください。