2008.06.19 (Thu) Category : Javascript,technology Author :

Ext.JS GroupingViewをAjaxでJSON形式で扱ってみる

sc0003.png

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などのビューの部分の関係がすこしば
かりわかったきがしました。

2008.06.16 (Mon) Category : Blog Author :

Ext.JSの参考サイト

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

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

Ext.JS 参考サイト

サイト名 URL 備考
Ext
Client-side JavaScript Framework
http://extjs.com/ 本家
Ext JS – Client-side JavaScript Framework http://extjs.com/products/extjs/  
ExtJapan http://www.ext-japan.org/  日本語
ExtJapan
Ext 2.0 – API ドキュメント & チュートリアル
http://www.ext-japan.org/docs/  
code:x – Ext JS JavaScript Library http://code.xenophy.com/?page_id=7 クラス一覧などがあります。
code:x – Ext http://code.xenophy.com/?page_id=90 サンプルもある。
TONTTU.NET http://www.tonttu.net/ フルExt.JSで自社ページを作られている。
Ext JS例文辞典 http://www.openspc2.org/reibun/ExtJS/library/ サンプルが多く掲載されています。
inputlog

http://blog.kyosuke.jp/category/javascript/ext-js

Ext.get()やExt.select()など、参考になります。
     

※随時更新していきます(たぶん)

2008.05.20 (Tue) Category : Blog Author :

Ext.JS s.gif

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サービスを呼んでいるところがありました。これは、解決したら報告します。

 

%d人のブロガーが「いいね」をつけました。