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セレクタは適宜変更してください。

進捗報告。

ExtJsでtwitterのフォロー/フォロワー管理アプリ作る! - konisimple logですが、あれから着々と進行しています!
タブや他の人のフォロワーなども自由に見られるような機能も実装したりして、楽しく作ってます。

フォロワーが1000人以上いる人でも実験してみましたが、手元の環境(SnowLeopard+Google Chrome)で、各種ソートに4,5秒かかってしまうようです。
これから機能を足せばたすほどどんどん遅くなるんですね…orz
まあでもフォロワーが数百であればわりと快適に動きます。まーいっか!

ExtJsでtwitterのフォロー/フォロワー管理アプリ作る!

ExtJstwitterのフォロー/フォロワー管理アプリを今日作り始めました。

Ext JSというJavaScriptフレームワークを発見した。
少ないコードで、とても高度なウェブアプリが作れることに感動!


Ext JS - RIA開発用JavaScriptフレームワーク
これを見ればどんなものが作れるかわかる!


このサンプルを見てるうちにこのフレームワーク書けるようになると心に決めました。


しかし、JavaScriptで本格的なOOPはしたことがなかったのでよくわからん!
そこで↓を見たりして勉強した。とてもわかりやすくまとまっている。
第4回 JavaScriptでオブジェクト指向プログラミング − @IT
ああprototypeってそういうことだったのか!
うっすらとわかった気がするw

そしてちょうどPHPのPEAR:HTTP_OAuthを利用して、twitterにoauthでログインしてみるテストもして、twitterのOAuthも簡単に出来るようになったので、twitterアプリ作ることにした。

実装したい機能

  • フォロー/フォロワーをExcelのような表に表示
  • 列のソートや行の選択もマウスを使ってExcelのように簡単に
  • →「発言数順にソートして少ない人をリムーブ」、「最終発言日でソートしてここ3ヶ月発言していない人をリムーブ」
  • ドラックアンドドロップでリストを簡単に編集
  • Ext JSなのでネイティブアプリのような使い心地
  • OAuthを利用するので安心

方法


そして今日起きてからいままででここまで出来た。

完成が楽しみ!