スタッフブログ株式会社クオリアシステムズ　スタッフによるブログ

Ext.JSでグルーピング表示のサンプルがあったので、使ってみました。以下Ext.JSのサンプルページ

http://extjs.com/deploy/dev/examples/grid/grouping.html

集計もやってみましたが、集計はまだExt｡JSには実装されていないようで、サンプルページのJavascriptからいただいて実装していますが、割愛させていただきます。

ソース中に静的に書かれたデータをds（以降、データストア）に読み込み、GroupingViewで表示するサンプルでしたが、このデータをAjaxで取得して動的に更新できないものかやってみました。

まず、AjaxでJSON形式のデータを取得するので、dsにJsonStoreを使おうとしましたが、できませんでした。

そもそも、グルーピングの基本は、dsにGroupingStore（Ext.data.GroupingStore）を使わなければなりませんでした。以下サンプルです。

補足：指定期間のデータを取得してきて、「division」フィールドでグルーピングします。sort情報（sortInfo）という項目ですが、必須のようです。なので、データにtypeがあり、そのtypeで昇順にソートを指定してます。listenersのbeforeloadでds.load()される前に、textFiled(monthDate)の値を取得してセットしています。

ds = new Ext.data.GroupingStore({
                                proxy    : new Ext.data.HttpProxy({
                                    url        :     '/ajax.php', // ajaxでjsonを返却するもの指定
                                    method    :    'POST'
                                }),
                                baseParams : {
                                        dateFrom            : '20080406',
                                        dateTo                : '20080412'
                                },

                                reader    : new Ext.data.JsonReader({
                                    root : 'results',　　// JSONのrootタグをresultsとしてます。
                                    totalProperty : ''
                                },  rec　　//rec は別途Ext.data.Record.createで作ったレコードの型
                                ),
                                groupField    : 'division', // divisionでグループ化
                                sortInfo    : {field:"type",direction:"ASC"},
                                listeners:    {
                                    'beforeload'    :     function(){
                                                            var month = Ext.get('monthDate').getValue();
                                                            if(month != ""){
                                                                this.baseParams.dateFrom     =month;
                                                            }
                                                        }
                                    }

 あとは、dsをExt.grid.GridPanelのstoreで指定します。

次にExt.grid.GridPanelのview部分ですが、
view : new Ext.grid.GroupingView({
  hideGroupedColumn : true
})
で、グループ化したフィールドを非表示にできます。そのあたりは、サンプルにもあるので、割愛します。

 データストア（ds）という、データが保存されている場所とそれらを表示するGridなどのビューの部分の関係がすこしばかりわかったきがしました。

Ext.JSを使っていて、まだまだわからないことばかりです。その度にweb検索をしていますが、なかなか良いサイトがみつかりません。

そこでいくつか参考になったサイトをまとめておこうとおもいます。

Ext.JS 参考サイト

※随時更新していきます（たぶん）

Ext.JSを使い始めて2週間。

いろいろ作りました。生産性がかなり向上し、工数がかなり削減！となったのですが、たまたま、わかりやすいものだったのですが、最近、複雑な要求が増え、google検索とExt.JSの日本のサイトを見ている毎日。

そこで、いろいろと覚えたことを書き留めます。

s.gif

これは、1×1ピクセルの透明なgifファイルです。これが、ダウンロードしたExt.JS内にもあるのに、なぜか外部接続をしようとします。

http://extjs.com/s.gif

ここを参照しているようです。

これをサイト内にあるs.gifを指定するように修正します。

Ext.BLANK_IMAGE_URL = '/js/ext-2.1/resources/images/default/s.gif';

ちなみに、/js以下にext-2.1を置いています。

これでOK。

とくに、社内システムで利用する場合は、勝手に外部に接続していることになるので、必ず指定しましょう。

それから、まだ解決してませんが、Ext.JS内のどこかで、Google Analyticsサービスを呼んでいるところがありました。これは、解決したら報告します。

Ext.JSというjavascriptライブラリがあります。

ExtJS2.0が出たので、使ってみることにしました。

Ext.JSは元々Yahoo! UI Liblary（YUI library）の拡張として開発されました。（yui-ext）

いまは、YUIとは依存関係の無いものとなっています。

ライセンス

ライセンスはLGPL。

概要

基本的には、画面周りを得意としています。

Windowやフォームなど比較的簡単に作ることができます。もちろん自分で同じものを作ろうとすればできなくはない、といったものですが、使えば、かなり工数削減になります。

また、他のJavascriptライブラリと共存可能とのことで（実際使ったことが無いので）クラスやファンクション名がぶつかり使えないといったことはなさそうです。　

ダウンロード

ダウンロードは、こちらから Ext.JS公式ホームページ

セットアップ

セットアップは、簡単です。

ダウンロードしたEx.JSを解凍し、サーバへアップロード。
そのアップロードしたExt.JSの中で
CSSファイルを１つ、javascriptファイル（js)を２つ指定します。

resources/ces/css/ext-all.css
adapter/ext/ext-base.js
ext-all.js

作成例↓

<link rel="stylesheet" type="text/css" href="/js/ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.0/ext-all-debug.js"></script>

基本はこれだけでOKです。

実際の使い方は、次回書こうと思います。
まずは、下記サンプルを見ながら、どういうことができるのか、イメージしてみると良いと思います。また、サンプルに出てくるjavascriptのファイルも、上記指定がされているものという前提で作られています。利用する場合には、注意が必要です。

Ext.JSサンプル

APIリファレンスはこちら
Ext｡JS API リファレンス