Hatena::ブログ(Diary)

konisimple log RSSフィード

はてなブログに移転しました!

2010年06月30日

進捗報告。

ExtJsでtwitterのフォロー/フォロワー管理アプリ作る! - konisimple logですが、あれから着々と進行しています!

タブや他の人のフォロワーなども自由に見られるような機能も実装したりして、楽しく作ってます。

f:id:konisimple:20100701000655p:image

フォロワーが1000人以上いる人でも実験してみましたが、手元の環境(SnowLeopard+Google Chrome)で、各種ソートに4,5秒かかってしまうようです。

これから機能を足せばたすほどどんどん遅くなるんですね…orz

まあでもフォロワーが数百であればわりと快適に動きます。まーいっか!

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

ExtJsグリッドデフォルトだと、長いセルは自動で省略されます。

しかし、高さのある行だと、行を折り返した方がいい場合があります。

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

f:id:konisimple:20100630233555p:image


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

2010年06月24日

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

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

Ext JSというJavaScriptフレームワークを発見した。

少ないコードで、とても高度なウェブアプリが作れることに感動!


Ext JS - RIA開発用JavaScriptフレームワーク

これを見ればどんなものが作れるかわかる!


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


しかし、JavaScriptで本格的なOOPはしたことがなかったのでよくわからん!

そこで↓を見たりして勉強した。とてもわかりやすくまとまっている。

第4回 JavaScriptでオブジェクト指向プログラミング − @IT

ああprototypeってそういうことだったのか!

うっすらとわかった気がするw

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

実装したい機能

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

方法


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

f:id:konisimple:20100625001015p:image

完成が楽しみ!