Webコピペ屋

今回はページング処理ができるツールバーについてです。説明するまでもないですが、データを何件かにわけて次へ前へとページを分けて表示する処理です。
前回で作成したグリッドパネルにつけていくという形でいきましょう。

前回と前々回において「Ext.data.Store」でデータを取得してExtJS内で使用できるところまで、を見てきました。
で、自然な流れとして次は表示となるわけですが、表示手法のひとつとして人気の高いUIグリッドパネルを見ていきましょう。

IBMでExt JS 入門者の最初の壁という記事があるぐらいですから難しいのは確かでしょう。
なのでまたいつものごとく泥臭くひとつずつ確認していきたいと思います。

前回はデータが同ドメインによせクロスドメインにせよ、離れて存在するとろこにあるものを引っ張ってきて使うということを検証しましたが、今度はメモリ内にあるデータ（変数）を使用してというのをこれまた泥臭くやってみたいと思います。
まぁ普通これやってから前回へという感じが自然で、逆になっちゃいましたけどええでしょう。

「Ext.data.Store」は色々な書き方ができるのでほんまややこしい。
何がややこしいというか混乱させているのは、よくあるサンプルの書き方がシンプルさを追求してか、
短い書き方、省略した書き方で書かれているからだと思う。

それもいいのだけれども、この書き方はこんな書き方もできる！こう書いてもおんなじだよ！という紹介の仕方はあまり見ない。
それがあれば学習効率も上がるのだけれども、仕方ないから自分で泥臭く手を動かして確かめるしかないのよね。

ExtJSに入る前に「javascriptとは何なのか？」をある程度知る必要があるみたいです。

最低限でも

■第4回　JavaScriptでオブジェクト指向プログラミング
■JavaScriptのイロハ

を理解しておくのではなく（それができれば何も問題ないが）、読んで「書いてある内容がわかる」は必要だと思う…多分。

少なくとも私は「書いてある内容がまったくわからん」状態でExtJSでうんうん唸っていたようだ。
「書いてある内容がわかって」初めてスタートラインなんでしょう、きっと。

だって、

「関数には最初からプロトタイブというオブジェクトが存在する」とか…
「JavaScriptは引数をチェックしない」とか…
「引数をarguments配列で受け取れる」とか…
「オブジェクトリテラル？何それ？」とか…

知りませんもんそんなんorz

今回はちょっと閑話休題。


さて、（僕のような）なんちゃってプログラマーがExtJSに安易に手を出すとたちまち行き詰ります。
最初は見た目から入り色々単発は作れるのですが、目的である実用アプリを作ろうとした途端、見えない高い壁が容赦なく阻んでくれます。
いくつかの秀逸なExtJS解説サイトにもよく書いてあるように、
「ExtJSは入り口は秀逸なUIに魅せられて簡単に見えるがこれほどよくできたJavaScript RIAフレームワークを簡単に扱えるはずがない。
基本を、ExtJSの仕組み枠組みを理解していないと即効で自滅します。」と。

実際そのとおりでございました。
おっしゃるとおりでございますorz

※2010/01/12に追記修正（2009/12/17にExt JS 3.1リリースのため）

『画面にカード型パネルを表示する』

パネルにも色々な種類を指定することができるのですが、そのひとつとして「layout: card」を指定したサンプルを作ってみましょう。

※2010/01/06に追記修正（2009/12/17にExt JS 3.1リリースのため）

『画面にパネルを表示する』

パネルとは情報等を表示する領域ボックスのことです。というと何のことかわかりませんし、後ほど出てくる『画面にウィンドウを表示する』のウィンドウと何が違うのかは難しいところです。



厳密には規定できないかもしれませんが、ウィンドウとの違いをいうのであれば、ウィンドウは単体で動くように振る舞いドラッグしたり消したりできるのに対し、パネルは画面の決まった箇所に固定で表示するボックス領域のこと…ぐらいに捉えておくといいのではないでしょうか。。。

※2009/12/28に追記修正（2009/12/17にExt JS 3.1リリースのため）

『画面にツールバーを表示する』



デスクトップアプリケーションのようなツールバーを表示してみましょう。

※2009/12/28に追記修正（2009/12/17にExt JS 3.1リリースのため）

『メッセージダイアログを表示する』



ユーザーに対して一方的に何かメッセージや注意喚起などを見せたい時に使うメッセージダイアログを表示してみましょう。

ちなみにExtJSはバージョン3.0です。